javascript布局查看器效果代码

时间：2021-02-22 18:03:36|栏目：JavaScript代码|点击：次

<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需再刷新一下页面才能执行]

上一篇：JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

栏目：JavaScript代码

下一篇：微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

本文标题：javascript布局查看器效果代码

本文地址：http://www.codeinn.net/misctech/68030.html

更多JavaScript代码

JavaScript代码

javascript布局查看器效果代码

阅读排行

推荐教程