I have no idea how to find the source of this element style codes. Such as at the right part of the Chrome Element Inspector Tool it shows this CSS code:

element.style {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 486px;
    height: 200px;
    overflow: hidden;
    -webkit-user-select: none;
    background-color: #FFF;
    border: 1px solid #ABABAB;
}

and at the left part there is this :

<div draggable="false" style="position: absolute; left: 0px; top: 0px; width: 486px; height: 200px; overflow: hidden; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);"></div>

I've looked into the modules files but I only see JavaScript and HTML files without the above line?

I have no idea how to find the source of this element style codes. Such as at the right part of the Chrome Element Inspector Tool it shows this CSS code:

element.style {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 486px;
    height: 200px;
    overflow: hidden;
    -webkit-user-select: none;
    background-color: #FFF;
    border: 1px solid #ABABAB;
}

and at the left part there is this :

<div draggable="false" style="position: absolute; left: 0px; top: 0px; width: 486px; height: 200px; overflow: hidden; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);"></div>

I've looked into the modules files but I only see JavaScript and HTML files without the above line?

• javascript
• html
• css

• Seems to be added inline through some javascript plugin. – Christopher Marshall Commented Jul 26, 2013 at 22:03
• Yes element.style means it's an inline style. If you haven't added an inline style then it is being added by a js plugin – Matt Lambert Commented Jul 26, 2013 at 22:45

5 Answers 5

element.style just tells you that the styles are added to the element through the style attribute or JavaScript, but not via an external CSS file. You might check you JS files for these properies if you can't find the them in your markup.

That's because those styles are inline. Meaning they use the style attribute of an HTML tag to define its CSS properties. That CSS is not in a file or elsewhere. It is being defined "within" the element it is being applied to.

That specific line of HTML doesn't need to exist in any file for that div to exist in the DOM. For example, this Javascript would create a div just like that:

var div = document.createElement('div');
div.setAttribute('draggable', 'false');
div.style.position = 'absolute';
div.style.overflow = 'hidden';
div.style.cssText += 'left: 0px; top: 0px; width: 486px; height: 200px; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);';
document.body.appendChild(div);

Try searching your JS files for -webkit-user-select. That style property is used rarely enough that it should help you find the relevant section of Javascript code.

I just ran into a similar problem, and it turned out that AdBlocker (browser plug-in) was inserting in-line styles to hide images on my site that it thought were ads. Try disabling some or all of your browser plug-ins and see if they are interfering with the way your page is rendered.

This might not be exactly what you are looking for, but if you click on the small '+' icon on the top right of the inspector, it lets you add your styles to a css class that is already attached to your element. When yo do so, you will be able to click on the inspector-stylesheet link that appears on the right of the defined style. I think thats the closest you can get to defining some sort of temporary stylesheet that will contain all of your custom styles.

Thats what I do for quick testing. Set some classes in the html, then add more custom styles in the inspector side panel - because its easy to edit and/pick colors in there. Then open inspector-stylesheet and copy them all once I am done.