首页 > 网络编程 > JavaScript > javascript技巧 > 布局查看器

javascript布局查看器效果代码

2008-10-05 13:50:08 作者：

用js直接区分网页布局代码，大家可以看下他的原理

<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+"&nbsp;id: "+spans[i].parentNode.id; 
    } 
} 
</script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]