Where does this style information come from

Question

I am debugging a web portal out of a Java project. In the resulting jsp page, a div is always not shown, the reason is because there is a "display:none" being set for it:

 <div class="settings_nav" style="display: none;">

  </div>

In the debug mode of the Chrome browser, there is a "Styles" section describes this as:

 element.style {
 display: none;
 }

Interestingly, this style information is not associated with any CSS stylesheets in Chrome debug mode, I searched through the CSS stylesheet set, there is still not hit.

Could experts give me some hint on where is the best place to find this style definition? Thanks.

Answer 1

It's not coming from a style sheet since it's an inline style on the div. Inline styles override values from style sheets.

Could have been added through JavaScript or server side code

Answer 2

element.style refers to dynamically added styles; that is, as others have pointed out, added by javascript. I would look through your js files. Your best bet is to search your js directory for keywords that are involved in changing CSS. I can almost guarantee that the word 'display' is used somewhere (unless you are using jquery) and if you are really lucky maybe you'll only get a couple hits on that search term.

Answer 3

There are a few different ways in which you might see the styles applied and you can check it through the dev tools.

1. Inline style
2. User-agent stylesheet
3. Styles defined in a stylesheet
4. Using Javascript