css布局查看器

　　发布时间：2008-10-29 11:22:00　

标签：布局,css,样式

突发奇想，写了以下这段代码，感觉还不错，拿来和大家分享

作用：查看页面布局

使用方法：在页面底部包含以下这段代码

ff3,ie7测试可用

var divs=document.getElementsByTagName("div");
var m=0;
for(i=0;i<divs.length;i++){
    if(!divs[i].hasChildNodes()){
        var text=document.createElement("span");
        var firstdivnode=divs[i].firstchild;
        divs[i].appendChild(text);
    }
    switch ((m++) ％ 5){
        case 0:
        divs[i].style.backgroundColor="#2F615A";
        break;
        case 1:
        divs[i].style.backgroundColor="#F3F7E1";
        break;
        case 2:
        divs[i].style.backgroundColor="#F7B17E";
        break;
        case 3:
        divs[i].style.backgroundColor="#ED7745";
        break;
        default:
        divs[i].style.backgroundColor="#214A45";
    }
}
var spans=document.getElementsByTagName("span");
for (i=0;i<spans.length;i++){
    spans[i].innerHTML=spans[i].parentNode.className;
    if(spans[i].parentNode.id){
        spans[i].innerHTML=spans[i].innerHTML+" id: "+spans[i].parentNode.id;
    }
}

代码演示：

<html><head><style>body{margin:0 auto;width:950px;font-size:12px;text-align:center;}#wholebody{width:950px;}.newline{/*仅应用于右侧*/clear:both;width:700px;}#top{height:auto;}.left_square{}.right_square{}#topic{height:100px;}#left{float:left;width:250px;}#left_qq{height:80px;}#left_inquire{height:220px;}#left_master_page{height:200px;}#left_online{height:220px;}#left_keyword{height:140px;}#left_aboutus{height:200px;}#right{float:left;width:700px;}#right_flash{width:700px;height:300px;float:left;}#right_chara{width:350px;float:left;height:200px;}#right_master_answer{width:350px;float:left;height:200px;}#right_knowledge{clear:both}.knowledge{float:left;width:140px;height:360px;}#right_research{float:left;width:50％;height:200px;}#right_recommend{float:left;width:50％;height:200px;}</style></head><body><div id="wholebody"><div id="top"></div> <div id="topic"></div><div id="left"> <div id="left_qq"></div> <div id="left_inquire"></div> <div id="left_master_page"></div> <div id="left_online"></div> <div id="left_keyword"></div> <div id="left_aboutus"></div> </div> <div id="right"> <div id="right_flash"></div> <div class="newline"> <div id="right_chara"></div> <div id="right_master_answer"></div> </div> <div id="right_knowledge"> <div class="knowledge"></div> <div class="knowledge"></div> <div class="knowledge"></div> <div class="knowledge"></div> <div class="knowledge"></div> </div> <div class="newline"> <div id="right_research">res</div> <div id="right_recommend">rec</div> </div> </div></div></body><script>var divs=document.getElementsByTagName("div");var m=0;for(i=0;i<divs.length;i++){if(!divs[i].hasChildNodes()){var text=document.createElement("span");var firstdivnode=divs[i].firstchild;divs[i].appendChild(text);}switch ((m++) ％ 5){case 0:divs[i].style.backgroundColor="#2F615A";break;case 1:divs[i].style.backgroundColor="#F3F7E1";break;case 2:divs[i].style.backgroundColor="#F7B17E";break;case 3:divs[i].style.backgroundColor="#ED7745";break;default:divs[i].style.backgroundColor="#214A45";}}var spans=document.getElementsByTagName("span");for (i=0;i<spans.length;i++){spans[i].innerHTML=spans[i].parentNode.className;if(spans[i].parentNode.id){spans[i].innerHTML=spans[i].innerHTML+" id: "+spans[i].parentNode.id;}}</script></html>

投稿

css布局查看器

猜你喜欢