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

JS中动态创建元素的三种方法总结(推荐)
下面小编就为大家带来一篇JS中动态创建元素的三种方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JavaScript将相对地址转换为绝对地址示例代码
本文为大家详细介绍下JavaScript怎么将相对地址转换为绝对地址，具体的示例如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
createElement动态创建HTML对象脚本代码
利用createElement动态创建链接，div等代码
2008-11-11
JavaScript实现鼠标经过表格某行时此行变色
这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格某行时此行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JS实现获取时间已经时间与时间戳转换
这篇文章主要为大家提供了用JavaScript编写的获取时间的类，以及时间戳转时间的三种格式，文中的示例代码讲解详细，感兴趣的可以了解一下
2022-03-03
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
这篇文章主要介绍了JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法,因转换的字符串数字都以0开头,导致parseInt函数在浏览器和Android WebView中转换结果不一样,本文给出了解决方法,需要的朋友可以参考下
2015-04-04
分析JavaScript数组操作难点
本篇文章通过例举代码分析的方式给大家讲解了JavaScript数组操作难点以及需要注意的地方，一起学习参考下吧。
2017-12-12
javascript中验证大写字母、数字和中文
本文为大家介绍下使用javascript验证大写字母小写字母，数字和中文，具体示例如下
2014-01-01
微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解，十分的全面、详尽，包含分享到朋友圈，分享给朋友，分享到QQ，拍照或从手机相册中选图，识别音频并返回识别结果，使用微信内置地图查看位置等接口，有需要的小伙伴参考下吧
2015-01-01
微信小程序添加插屏广告并设置显示频率(一天一次)
微信小程序今年新上线了插屏广告，设置和在代码库中接入都非常方便。今天通过本文给大家分享微信小程序添加插屏广告并设置显示频率(一天一次),需要的朋友可以参考下
2019-12-12

javascript布局查看器效果代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具