类似于开发者工具的js代码

实现代码如下：

function test() {
    var lala=document.getElementsByTagName("div");//将所有的div标签加上点击事件
    for (i=0;i<lala.length;i++){
        lala[i].wuss="yes";
        lala[i].addEventListener("click",onclickon.bind(lala[i],lala[i]));
    }
    var lala=document.getElementsByTagName("form");//将所有的form标签加上点击事件
    for (i=0;i<lala.length;i++){
        lala[i].wuss="yes";
        lala[i].addEventListener("click",onclickon.bind(lala[i],lala[i]));
    }
//PS 还可以自己添加自己想弄的标签，例如span之类的

//添加hover事件，这里这么写避免的hover重叠的问题 (PS 当然这里可以写一个数组，例如type=["div","span"]然后循环数组添加下面的鼠标事件，这样能更方便管理)
    $(function() {
        $("div").mouseover(function(e) {
            $(this).addClass("hover");
            e.stopPropagation();
        });
        $("div").mouseout(function(e) {
            $(this).removeClass("hover");
            e.stopPropagation();
        });
        $("form").mouseover(function(e) {
            $(this).addClass("hover");
            e.stopPropagation();
        });
        $("form").mouseout(function(e) {
            $(this).removeClass("hover");
            e.stopPropagation();
        });
    });
}

.hover{//这是hover class类
    background-color:rgba(33, 150, 243, 0.68);
}

function onclickon(a) {//点击区域后，自动变颜色，再次点击，颜色恢复
    if (a.style.backgroundColor!="rgba(76, 175, 80, 0.65098)"){
        a.style.backgroundColor="rgba(76, 175, 80, 0.65098)";
        (function(e){//避免冒泡
            var e = window.event || e;
            if (e.stopPropagation) e.stopPropagation();
            else e.cancelBubble = true;
        })(event);

    }
    else{
        a.style.backgroundColor="";
        (function(e){
            var e = window.event || e;
            if (e.stopPropagation) e.stopPropagation();
            else e.cancelBubble = true;
        })(event)
    }
}

可以在中添加该函数，这样就能网页一加载就能添加了（PS当然这只能在自己的网站上弄，等这个弄成插件的话就能在其他网站上也进行了）

原文来自我的另一博客——博客地址