用纯JavaScript代码来突出显示HTML元素

Question

为了调试一些JavaScript代码，我正在寻找JavaScript代码（最好只是纯粹的js，没有库和依赖项），可以突出显示一个

或（可能是通过在其上放置一个大小和形状相同、颜色鲜艳且有一定透明度的div或span）。

我很确定这是可以做到的，但我不知道如何开始。

澄清：

我需要在我的元素上方放置一个半透明的

。修改背景或添加边框将无济于事，因为我的元素本身具有背景和边框。

- flybywire

---

轮廓不会影响元素的边框，它是在边框外呈现的。 - Blixt

Answer 1

element.style.backgroundColor = "#FDFF47";

#FDFF47是一种很漂亮的黄色调，非常适合用于高亮显示。

编辑以澄清：你正在过度复杂化事情。如果你想要恢复先前的背景颜色，只需存储element.style.backgroundColor，稍后再访问它即可。

- Eli Grey

---

很难找到比那更简单或更有效的了。 - Jim Davis

由于我花了一些时间在这上面，请注意（至少在Firefox 71上），如果您使用十六进制符号，element.style.backgroundColor仅在设置颜色时起作用。如果您需要读取它并使用if检查它，请使用Rgb符号。 - Giampaolo Ferradini

Answer 2

如果你正在使用支持CSS outline的浏览器进行调试，一个简单的解决方案如下：

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

- Blixt

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

- Mark Rakhmatov

Answer 4

虽然这是一个旧帖子，但由于该主题的搜索结果中会出现，因此值得添加。实现高亮效果的简单方法如下：

myElement.style.filter = "brightness(125%)";

- user12835383

---

我喜欢这个答案，非常优雅，谢谢！ - nmu

Answer 5

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

- Christoph

---

请确保在 highlight.div 上设置 pointerEvents: 'none'，因为您不希望突出显示高亮部分。 - stuikomma

Answer 6

你使用Firebug吗？它可以很容易地识别DOM元素，并在你遍历DOM时在页面上突出显示它们。

- robjmills

Answer 7

这是一个结合前两个答案的函数：

function highlight(element){
    let defaultBG = element.style.backgroundColor;
    let defaultOutline = element.style.outline;

    element.style.backgroundColor = "#FDFF47";
    element.style.outline = '#f00 solid 4px';

    setTimeout(function()
    {
        element.style.backgroundColor = defaultBG;
        element.style.outline = defaultOutline;

    }, 2000);
}

- JohnP2