用于突出显示 html 元素的纯 JavaScript 代码

Question

to debug some javascript code, I am looking for javascript code (preferably just js, without libraries and dependencies) that can highlight a div or span (probably by putting over it a div or span of the same size and shape with a bright color and some transparency).

I pretty sure it can be done, but I don't know how to start.

CLARIFICATION

I need to put a semi transparent div on top of my element. Modifying the background or adding borders will not help as my elements have themselves backgrounds and borders.

Answer 1

element.style.backgroundColor = "#FDFF47";

#FDFF47 is a nice shade of yellow that seems perfect for highlighting.

Edit for clarification: You're over-complicating things. If you ever want to restore the previous background color, just store element.style.backgroundColor and access it later.

Answer 2

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

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

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

Do you use Firebug? It makes it very simple to identify dom elements and will highlight them in the page as you walk through the dom.

Answer 5

Old post, but worth adding since it shows up in searches on the topic. A simple way to achieve a highlighting effect is:

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

Answer 6

Here is a function that combines the top 2 answers:

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

Answer 7

---

If for some reason you need to use javascript here is function that temporary highlits element background

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