código javascript para resaltar un elemento html

Question

para depurar algún código javascript, estoy buscando código javascript (preferiblemente solo js, ​​sin librerías y dependencias) que pueda resaltar un div o span (probablemente poniendo sobre él un div o span del mismo tamaño y forma con un color brillante y algo de transparencia).

Estoy bastante seguro de que se puede hacer, pero no sé cómo comenzar.

CLARIFICACION

tengo que poner un div semitransparente en la parte superior de mi elemento. Modificar el fondo o agregar bordes no ayudará ya que mis elementos tienen fondos y bordes.

Answer 1

element.style.backgroundColor = "#FDFF47"; 

# FDFF47 es un bonito tono de amarillo que parece perfecto para resaltar.

Edite para la aclaración: Usted está sobre complicando cosas. Si alguna vez desea restaurar el color de fondo anterior, simplemente almacene element.style.backgroundColor y acceda a él más tarde.

Answer 2

Si está depurando en un navegador que soporte el CSS outline, una solución simple es la siguiente:

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

Answer 3

¿Utiliza Firebug? Hace que sea muy simple identificar los elementos dom y los resaltará en la página mientras caminas a través de la 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'; 
}