普通的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

如果由于某种原因你需要使用 javascript，这里是临时高亮元素背景的函数

function highlight(element) {
    let defaultBG = element.style.backgroundColor;
    let defaultTransition = element.style.transition;

    element.style.transition = "background 1s";
    element.style.backgroundColor = "#FDFF47";

    setTimeout(function()
    {
        element.style.backgroundColor = defaultBG;
        setTimeout(function() {
            element.style.transition = defaultTransition;
        }, 1000);
    }, 1000);
}