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

来源：互联网发布：2017手机最新软件编辑：程序博客网时间：2024/06/11 15:40

这里写图片描述

实现代码如下：

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当然这只能在自己的网站上弄，等这个弄成插件的话就能在其他网站上也进行了）

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

0 0