18

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?

enter image description here

Brian Powell
  • 3,336
  • 4
  • 34
  • 60

4 Answers4

22

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

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
11

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

Ted
  • 14,757
  • 2
  • 41
  • 58
2

That's probably manipulated and set by javascript (either that or you edited the element.style{} rule yourselves on the developer tools console).

Look for javascript code that changes the display, top and left properties of #popupDiv

thanix
  • 1,287
  • 9
  • 5
1

It is the style that you have in the HTML file. try to delete or change the style in HTML.

Ahmad Shommari
  • 11
  • 1