類似於開發者工具的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當然這只能在自己的網站上弄,等這個弄成插件的話就能在其他網站上也進行了)

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章