Plain JavaScript code to highlight an HTML element

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.

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

Eli Grey · Accepted Answer · 2009-09-07 18:35:31Z

26

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.

edited Sep 7, 2009 at 18:35

answered Sep 7, 2009 at 14:24

Eli Grey

36k14 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jim Davis Over a year ago

Doubt you'll get much simpler or effective than that.

Giampaolo Ferradini Over a year ago

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.

Blixt · Accepted Answer · 2009-09-07 14:17:43Z

14

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

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

answered Sep 7, 2009 at 14:17

Blixt

50.3k13 gold badges128 silver badges156 bronze badges

Comments

Mark Rakhmatov · Accepted Answer · 2021-01-30 18:51:50Z

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

user12835383 · Accepted Answer · 2020-02-03 22:49:48Z

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%)";

edited Feb 3, 2020 at 22:49

answered Feb 3, 2020 at 21:21

user12835383

412 bronze badges

Comments

Christoph · Accepted Answer · 2009-09-07 17:17:34Z

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

Make sure to set pointerEvents: 'none' on highlight.div because you wouldn't want to highlight the highlight.

robjmills · Accepted Answer · 2009-09-07 14:18:29Z

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.

answered Sep 7, 2009 at 14:18

robjmills

18.6k16 gold badges81 silver badges124 bronze badges

Comments

JohnP2 · Accepted Answer · 2021-01-08 00:35:13Z

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

answered Jan 8, 2021 at 0:35

JohnP2

2,34523 silver badges20 bronze badges

Collectives™ on Stack Overflow

Plain JavaScript code to highlight an HTML element

7 Answers 7

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Related