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

Javascript array类数组操作方法
Javascript array类的一些对象使用方法，方便大家操作数组
2009-08-08
javascript中日期转换成时间戳的小例子
javascript中日期转换成时间戳的小例子，需要的朋友可以参考一下
2013-03-03
深入浅析JavaScript中的Function类型
Function是javascript里最常用的一个概念，javascript里的function是最容易入手的一个功能，但它也是javascript最难理解最难掌握的一个概念。这篇文章主要介绍了JavaScript中的Function类型的相关资料，一起看下吧
2016-07-07
Three.js利用性能插件stats实现性能监听的方法
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景，而下面这篇文章主要给大家介绍了关于Three.js如何利用性能插件stats实现性能监听的相关资料，需要的朋友可以参考借鉴，下面来一起学习学习吧。
2017-09-09
基于BootStrap的文本编辑器组件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。这篇文章主要介绍了基于BootStrap的文本编辑器组件Summernote的相关资料,需要的朋友可以参考下
2017-10-10
微信小程序实现收缩式菜单
这篇文章主要为大家详细介绍了微信小程序实现收缩式菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
javascript中eval函数用法分析
这篇文章主要介绍了javascript中eval函数用法,实例分析了javascript中eval函数的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JS中解决谷歌浏览器记住密码输入框颜色改变功能
这篇文章主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
“工欲善其事，必先利其器” 恩，这句话我觉得说的特别有道理，下面这篇文章主要给大家介绍了关于利用chrome浏览器进行js调试并找出元素绑定的点击事件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-09-09
javascript 正则表达式去空行方法
本文主要介绍了javascript 正则表达式去空行方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01