Printing inline style values of an HTML element using javascript

Question

How can i print the value of style attribute of an html element using javascript. I can get a specific style property value using document.getElementById('myId').style.property, where property is something like width, height etc.

However, how can I get the entire list of styles for an element?

If you want the value of an element's style attribute (i.e. the "inline" style) then the only way is getAttribute (which is buggy in some browsers so not very reliable). However, if you want values of the various properties of an HTML element's style object, the answers below might be helpful. — RobG
– RobG, Commented Sep 7, 2011 at 1:30

someone · Accepted Answer · 2011-09-06 21:27:02Z

2

document.getElementById('myId').style.cssText as a String, or document.getElementById('myId').style as an Object.

Edit:

As far as I can tell, this returns the "actual", inline style. On the element <a id='myId' style='font-size:inherit;'>, document.getElementById('myId').style.cssText should return "font-size:inherit;". If that is not what you want, try document.defaultView.getComputedStyle or document.getElementById('myId').currentStyle (the first one is all except IE, the second one is IE only). See here for more on computed vs. cascaded styles.

edited Sep 6, 2011 at 21:27

answered Sep 6, 2011 at 21:02

someone

1,4788 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai Iorga · Accepted Answer · 2011-09-06 21:05:35Z

2

<div id="x" style="font-size:15px">a</div>
<script type="text/javascript">
function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

// get what style rule you want
alert(getStyle(document.getElementById('x'), 'font-size'));
</script>

answered Sep 6, 2011 at 21:05

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

1 Comment

Jinu Joseph Daniel Over a year ago

Is document.defaultView supported in IE 9

Joseph Marikle · Accepted Answer · 2011-09-06 21:08:23Z

2

Oh srsly... it's as easy as

element.style.cssText

and it's cross browser

http://jsfiddle.net/4F2RQ/

answered Sep 6, 2011 at 21:08

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Comments

Joe · Accepted Answer · 2011-09-06 21:13:07Z

1

This should do a dump of the object: Here's an Example

EDIT: Its a little weird:

for (var prop in styles) {
    console.log(styles[prop], styles[styles[prop]]);
}

edited Sep 6, 2011 at 21:13

answered Sep 6, 2011 at 21:01

Joe

82.8k18 gold badges130 silver badges147 bronze badges

1 Comment

NT3RP Over a year ago

I thought the same thing; but unfortunately, that does not work.

Collectives™ on Stack Overflow

Printing inline style values of an HTML element using javascript

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related