How to get inline CSS style property from element

Question

I have problem with getting inline css style properties.

I'd tried doing that with:

 var inline_css = $(this).attr("style");

but...

it works only when element does not have any other css properties outside inline style... like:

.our_element {something: some;}

Any ideas how to get only inline CSS properties from element which has many other CSS properties?

Solution

If you mean a style from the style attribute, you can access them directly on the element instance:

var color = this.style.color;

That will give you the color only if it's in the style attribute (not applied via stylesheet).

The names you use are camelCase if you use literal notation, e.g. this.style.fontSize, or you can also use the CSS dashed style using brackets notation, this.style["font-size"].

Just for completeness, if you want the information whether it comes from the style attribute or a stylesheet, jQuery's CSS function does just that:

var color = $(this).css("color");

---

From your comment:

thanks, but if I want all properties can I use this.style ??

If you want all of the inline-styles as text, either get the style attribute (as you're doing) or use this.style.cssText.

If you want all of the styles, regardless of whether they're inline or not, as an object, use getComputedStyle (or currentStyle on obsolete browsers like IE8):

var style = window.getComputedStyle ? getComputedStyle(this) : this.currentStyle;
if (style) { // This will be true on major browsers
    var color = style.color; // Or whatever
}

Examples:

var div = document.querySelector(".foo");
snippet.log("div.style.fontSize: " + div.style.fontSize);
snippet.log("div.style.color: " + div.style.color);
snippet.log("div.style.cssText: " + div.style.cssText);
snippet.log("$(div).attr('style'): " + $(div).attr('style'));
snippet.log("$(div).css('fontSize'): " + $(div).css('fontSize') + " (note that's in pixels, probably, not pt)");
snippet.log("$(div).css('color'): " + $(div).css('color'));

.foo {
  font-size: 14pt;
  color: green;
}

<div class="foo" style="font-size: 12pt">
  This has an inline <code>font-size: 12pt</code> and
  CSS (not inline) giving <code>font-size: 14pt</code> and <code>color: green</code>.
</div>
<hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Comments

[luke9999]

thanks, but if I want all properties can I use this.style ??

[T.J. Crowder]

@luke9999: I don't understand the question. In your question, you said you wanted to get one of them.

[luke9999]

sorry then, I mean all inline properties... ;/

[A. Wolff]

@luke9999 So what's wrong with $(this).attr("style");??? Do you mean these properties could be overwritten by other rules or what? Can you provide concrete sample replicating your issue?

[luke9999]

it works but its getting properties from file not inline style ;/

[T.J. Crowder]

@luke9999: No, .attr("style") will not give you CSS-applied properties. Only the content of the style attribute.

[T.J. Crowder]

@luke9999: Anyway, I've added examples to the answer to show what you get from the style attribute, the style property, and jQuery's CSS. Note how both the style attribute and property do not include CSS-applied styles.