простой javascript код, чтобы выделить элемент html

Question

для отладки кода javascript, я ищу javascript-код (желательно просто js, без библиотек и зависимостей), который может выделить div или span (возможно, положив поверх него div или span одинакового размера и формы с ярким цветом и некоторой прозрачностью).

Я уверен, что это можно сделать, но я не знаю, с чего начать.

РАЗЪЯСНЕНИЕ

мне нужно поставить полупрозрачные DIV поверх моего элемента. Изменение фона или добавление границ не поможет, поскольку мои элементы имеют собственные фоны и границы.

Answer 1

element.style.backgroundColor = "#FDFF47"; 

# FDFF47 - красивый оттенок желтого, который кажется идеальным для подсветки.

Редактировать для разъяснения: Вы слишком усложняете ситуацию. Если вы хотите восстановить предыдущий цвет фона, просто сохраните element.style.backgroundColor и получите доступ к нему позже.

Answer 2

Если вы отладки в браузере, который поддерживает CSS outline, один простое решение заключается в следующем:

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'; 
}