使用普通JavaScript代码突出显示html元素

Question

要调试一些javascript代码，我正在寻找可以突出显示div或span的javascript代码（最好是js，没有库和依赖项）（可能是通过将div或span大小和形状相同而明亮的颜色和一些透明度）。

我很确定可以完成，但是我不知道如何开始。

澄清

我需要在元素上方放置一个半透明的div。修改背景或添加边框将无济于事，因为我的元素本身具有背景和边框。

Answer 1

element.style.backgroundColor = "#FDFF47";

＃FDFF47是一种很好的黄色阴影，看起来非常适合突出显示。

Answer 2

如果在支持CSS outline的浏览器中调试，一个简单的解决方案是这样：

Answer 3

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

Answer 4

您使用Firebug吗？它使识别dom元素变得非常简单，并在您浏览dom时在页面中突出显示它们。

Answer 5

[旧文章，但值得添加，因为它出现在对该主题的搜索中。一种实现突出显示效果的简单方法是：