What is element.style and why is it overriding my css settings?

Question

I have a popup that comes up over a blanket div that greys out the entire screen, but I don't like its positioning. So I tried to manually enter left: and top: elements into my CSS, but when I look at Chrome's console, there's this element.style {} that's overriding my code.

I've searched my CSS file for element.style and for 597px and 794px and I don't get hits on any of them.

What is this, and why does it have the values that it has?

Answer 1

element.style is a part of your browser devtools that indicates the inline style of the element which has a higher specificity value than any CSS selectors.

That inline styles may be added by a JavaScript code, if so, you can override that declarations by using !important keyword within your stylesheet (e.g. left: 610px !important).

Answer 2

element.style refers to inline styles on the dom element. For example:

<p style="color:#cc0000;">Foo</p>

the color of that paragraph would show up under element.style.

You can fix with your css by doing this:

#popUpDiv[style]{
    left:610px !important;
    top:0px !important;
}

HTH -Ted