一段加outline的油猴脚本,方便布局

最新推荐文章于 2025-09-12 17:31:31 发布

weixin_30784945

最新推荐文章于 2025-09-12 17:31:31 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

文章标签：数据结构与算法

原文链接：http://www.cnblogs.com/lishenglyx/archive/2009/12/09/1620512.html

本文介绍了一个简单的用户脚本，用于在网页上高亮显示所有HTML元素，便于开发者查看页面结构。脚本通过递归遍历DOM树并设置元素轮廓来实现此功能。

代码

// ==UserScript==
// @name           outline
// @namespace      outline
// @include        http://*
// ==/UserScript==
/*
function countTags(n){
        if(n.nodeType == 1){
            set(n);   // 如果是Node.ELEMENT_NODE即元素节点则+1
        }
        var child = n.childNodes; // 获取当前节点的子节点数
        for(var i = 0; i < child.length; i++){
            countTags(child[i]); // **这里要理解递归深度优先,每遇到一个子元素则进一步递归下一级子元素,然后返回值都付给numtags;
        }
        return ;
    }
function set(o)
{
    if(o.style)
        o.style.outline='1px solid #ccc'//+randomColor();
}

function randomColor()
{
     var str = '0123456789abcdef';
     var color = '#';
     for(i = 0; i < 6; i++)
     {
         color = color + str.charAt(Math.random() * 16);
     }
     return color;
}
*/
var href=location.href;
if(href.indexOf('?1')>=0)
{
    var style = document.createElement("style");
    style.type = "text/css";
    style.textContent = '*{outline:1px solid #ccc}';
    document.getElementsByTagName("head")[0].appendChild(style);
//    countTags(document);
}

注释的部分为随机色,不过现在看来效果不好。还是用一种颜色了。

加载了油猴脚本后的页面