css布局查看器

时间:2008-10-29 11:22:00 

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

作用:查看页面布局

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

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

代码演示:


标签:布局,css,样式
0
投稿

猜你喜欢

  • jquery密码强度测试工具源码

    2009-12-23 19:38:00
  • 用好FrontPage2003的九大功能

    2008-02-21 14:29:00
  • sqlserver 巧妙的自关联运用

    2012-07-21 14:55:12
  • MySQL数据库本地备份和双机相互备份

    2008-05-27 12:25:00
  • asp里Sub与Function有什么区别

    2007-08-17 10:39:00
  • 成为一个顶级设计师的第二准则

    2008-04-01 09:41:00
  • JavaScript游戏开发之键盘控制层的移动

    2008-09-13 19:29:00
  • mssql 大小写区分方法

    2008-12-29 14:08:00
  • MSSQL2005数据附加失败报错3456解决办法

    2012-11-30 19:56:59
  • web2.0中流行的设计元素:颜色

    2007-12-10 12:16:00
  • 用 onerror 获取错误信息 js Debug

    2008-11-03 19:08:00
  • 给页面 unload 加上效果

    2009-03-12 12:32:00
  • asp 实现的冒泡排序程序

    2011-03-25 11:13:00
  • 带农历的JavaScript日期时间js代码

    2010-08-01 10:29:00
  • css网页下拉菜单制作方法(4):定位问题

    2007-02-03 11:39:00
  • 用ASP实现txt,doc,jpg等文件下载的函数

    2007-08-17 13:17:00
  • 谦逊编程(翻译整理)

    2009-07-28 12:52:00
  • asp如何对数组显示和排序?

    2009-11-20 18:30:00
  • ASP中Utf-8与Gb2312编码转换乱码问题的解决方法 页面编码声明

    2012-11-30 20:45:55
  • asp 删除数据库记录的代码

    2011-02-05 10:39:00
  • asp之家 网络编程 m.aspxhome.com