zwykły kod JavaScript, aby podświetlić element HTML

Question

do debugowania kodu JavaScript, szukam kodu javascript (najlepiej tylko js, ​​bez bibliotek i zależności), które można wyróżnić div lub rozpiętość (prawdopodobnie poprzez umieszczenie nad nim div lub rozpiętości tego samego rozmiaru i kształtu z jasnym kolorem i przezroczystością).

Jestem prawie pewien, że można to zrobić, ale nie wiem, jak zacząć.

WYJAŚNIENIE

muszę umieścić półprzezroczystą div na szczycie mojej elementu. Modyfikowanie tła lub dodawanie obramowań nie pomoże, ponieważ moje elementy mają swoje tło i granice.

Answer 1

element.style.backgroundColor = "#FDFF47"; 

# FDFF47 jest ładnym odcieniem żółtego, który idealnie nadaje się do podświetlania.

Edytuj, aby uzyskać wyjaśnienie: Zbytnio komplikujesz rzeczy. Jeśli kiedykolwiek chcesz przywrócić poprzedni kolor tła, po prostu zapisz element.style.backgroundColor i uzyskaj do niego dostęp później.

Answer 2

Jeśli debugowanie w przeglądarce, która obsługuje CSS outline jedno proste rozwiązanie to:

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

Answer 3

Używasz Firebug? Ułatwia identyfikację elementów dom i podświetla je na stronie podczas przechodzenia przez 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'; 
}