12

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.

1
  • An outline will not affect the border of an element; it is rendered outside the border.
    – Blixt
    Sep 7, 2009 at 21:32

7 Answers 7

25
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.

2
  • 1
    Doubt you'll get much simpler or effective than that.
    – Jim Davis
    Sep 7, 2009 at 17:58
  • 1
    Since I spent a bit of time on this: beware that (at least on Firefox 71) element.style.backgroundColor works only on setting the color if you use hex notation. If you need to read it and check it with an if, use Rgb notation. Dec 29, 2019 at 0:54
14

If you're debugging in a browser that supports the CSS outline, one simple solution is this:

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

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

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%)";
1
  • I love this answer, so elegant, thank you!
    – nmu
    Sep 17, 2021 at 11:11
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';
}
1
  • Make sure to set pointerEvents: 'none' on highlight.div because you wouldn't want to highlight the highlight.
    – stuikomma
    Jul 28, 2016 at 11:35
0

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.

0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.