は、マウスの上にあるDOM要素をinspectのように強調表示します

Question

ブックマークレットがあり、ユーザーはボタンをクリックし、highligtherのような検査が必要です。これをクロスブラウザにします。

このため、マウスの移動中にDOM要素を検出する必要があります。この要素を取得したら、CSSで強調表示する必要があります。

マウスの移動でDOM要素を検出する際に問題がありますが、これがどのように行われるか教えてください。

このDOM要素があると、ユーザーのクリックでXPathを抽出する必要があります。

Answer 1

documentまたはdocument.bodyにmousemoveをフックしてから、イベントオブジェクトのtargetプロパティを使用して、マウスが上にある要素を見つけることができます。それにCSSを適用するのはおそらく、クラスを追加することで最も簡単です。

しかし: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 |あなたのブックマークレットでこのコードでは、この

$('*').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; 
    } 
); 

ような何かを行うことができますjqueryのの助けを借りてsource

Answer 2

、私はこれを修正しています今までにどのようなコード

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");