codice javascript semplice per evidenziare un elemento html

Question

per eseguire il debug di un codice javascript, sto cercando il codice javascript (preferibilmente solo js, ​​senza librerie e dipendenze) che può evidenziare un div o span (probabilmente mettendolo sopra un div o span della stessa dimensione e forma con un colore brillante e una certa trasparenza).

Sono abbastanza sicuro che si possa fare, ma non so come iniziare.

CHIARIMENTO

ho bisogno di mettere un div semi trasparente sulla parte superiore del mio elemento. La modifica dello sfondo o l'aggiunta di bordi non è di aiuto in quanto i miei elementi hanno essi stessi sfondi e bordi.

Answer 1

element.style.backgroundColor = "#FDFF47"; 

# FDFF47 è una gradevole sfumatura di giallo che sembra perfetta per l'evidenziazione.

Modifica per chiarimenti: Ti stai complicando troppo le cose. Se si desidera ripristinare il colore di sfondo precedente, è sufficiente memorizzare element.style.backgroundColor e accedervi in ​​seguito.

Answer 2

Se stai debug in un browser che supporta il CSS outline, una soluzione semplice è questa:

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

Answer 3

Usi Firebug? Rende molto semplice identificare gli elementi dom e li evidenzierà nella pagina mentre passi attraverso il 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'; 
}