माउस पर एक डीओएम तत्व को हाइलाइट करता है, जैसे निरीक्षण

Question

हमारे पास एक बुकमार्कलेट है, और उपयोगकर्ता एक बटन पर क्लिक करता है और उच्च निरीक्षण की तरह निरीक्षण करता है। हम इसे क्रॉस ब्राउज़र बनना चाहते हैं।

इसके लिए हमें माउस चाल के दौरान डीओएम तत्व का पता लगाने की आवश्यकता है, और एक बार हमारे पास यह तत्व होने के बाद हमें सीएसएस के साथ हाइलाइट करने की आवश्यकता है।

हमें माउस चाल से डीओएम तत्व का पता लगाने में समस्याएं हैं, क्या आप हमें मार्गदर्शन कर सकते हैं कि यह कैसे किया जाता है?

एक बार हमारे पास यह डोम तत्व है, उपयोगकर्ता क्लिक पर हमें XPath निकालने की आवश्यकता है।

Answer 1

आप document या document.body पर mousemove हुक कर सकते हैं, तो घटना वस्तु की target संपत्ति का उपयोग सर्वोच्च तत्व माउस खत्म हो गया है पता लगाने के लिए। फिर इसे सीएसएस लगाने के लिए शायद इसे कक्षा में जोड़कर आसानी से किया जा सकता है।

लेकिन मुझे आश्चर्य है अगर :hover छद्म स्तरीय आप कुछ परेशानी की बचत हो सकती ...

तो :hover का उपयोग नहीं है, यहाँ एक उदाहरण है:

(function() { 
    var prev; 

    if (document.body.addEventListener) { 
    document.body.addEventListener('mouseover', handler, false); 
    } 
    else if (document.body.attachEvent) { 
    document.body.attachEvent('mouseover', function(e) { 
     return handler(e || window.event); 
    }); 
    } 
    else { 
    document.body.onmouseover = handler; 
    } 

    function handler(event) { 
    if (event.target === document.body || 
     (prev && prev === event.target)) { 
     return; 
    } 
    if (prev) { 
     prev.className = prev.className.replace(/\bhighlight\b/, ''); 
     prev = undefined; 
    } 
    if (event.target) { 
     prev = event.target; 
     prev.className += " highlight"; 
    } 
    } 

})(); 

Live copy | source

Answer 2

jQuery की मदद आप इस

$('*').hover(
    function(e){ 
     $(this).css('border', '1px solid black'); 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    },function(e){ 
     $(this).css('border', 'none'); 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    } 
); 

अपने बुकमार्कलेट में इस कोड के साथ

की तरह कुछ कर सकते हैं के साथ

, आप लोड कर सकते हैं मैं यह है कि क्या कभी कोड

javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");