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?

Answer 1

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>

Answer 2

As old as this is, the actual question was on getting all computed styles on a given element.

What you were actually wanting to use it the Window.getComputedStyle() method.

With browser support going back, further than the original question.

Example:

var ourElement = document.querySelector(".ourElement");
var ourElementStyles = window.getComputedStyle(ourElement);

ourElement.textContent += ourElementStyles.color;

.ourElement {
  color: rgb(0, 255, 0) !important;
}

<div class="ourElement" style="color:rgb(255,0,0)">color: </div>

Answer 3

Even if it's an old post but this is the answer that can be helpful for others. You can try the below code -

HTML code like -

<p style="color: red; height: 300px">

jQuery code -

let height = $('p').get(0).style.height;
let color = $('p').get(0).style.color;

Output below -

let height = $('p').get(0).style.height;
let color = $('p').get(0).style.color;

$('#output').html( 'Color: ' + color + '<br> Height: ' + height );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="color: red; height: 300px">
<div id="output"></div>