HTML要素を強調表示するためのプレーンなjavascriptコード

Question

いくつかのjavascriptコードをデバッグするには、divまたはspanを強調表示できるjavascriptコード（好ましくはjs、ライブラリおよび依存関係なし）を探しています明るい色と透明度を持つ同じ大きさと形のもの）。

私はそれができると確信していますが、私はどのように起動するのか分かりません。

明確化

私は私の要素の上に半透明のdiv要素を配置する必要があります。私の要素自体が背景や境界線を持っているので、背景を変更したり、罫線を追加したりすることは役に立ちません。

Answer 1

element.style.backgroundColor = "#FDFF47"; 

＃FDFF47は、ハイライトに最適な黄色です。

説明を編集します。あなたは複雑すぎます。以前の背景色を元に戻したい場合は、element.style.backgroundColorを保存して後でアクセスしてください。

Answer 2

あなたはCSS outlineをサポートしているブラウザでデバッグしている場合は、1つの簡単な解決策はこれです：

myElement.style.outline = '#f00 solid 2px'; 

Answer 3

あなたはFirebugのを使用していますか？ dom要素を特定するのが非常に簡単になり、DOMを歩くときにページ内で強調表示されます。

Answer 4

function highlight(element) { 
    var div = highlight.div; // only highlight one element per page 

    if(element === null) { // remove highlight via `highlight(null)` 
     if(div.parentNode) div.parentNode.removeChild(div); 
     return; 
    } 

    var width = element.offsetWidth, 
     height = element.offsetHeight; 

    div.style.width = width + 'px'; 
    div.style.height = height + 'px'; 

    element.offsetParent.appendChild(div); 

    div.style.left = element.offsetLeft + (width - div.offsetWidth)/2 + 'px'; 
    div.style.top = element.offsetTop + (height - div.offsetHeight)/2 + 'px'; 
} 

highlight.div = document.createElement('div'); 

// set highlight styles 
with(highlight.div.style) { 
    position = 'absolute'; 
    border = '5px solid red'; 
}