Retrieve CSS value, not inline-style value

Question

In Javascript, can I retrieve the CSS values of an element without taking account of its inline style?

example:

body { font-size: 15px; }

<body style="font-size: 20px;">

Is there a way I can retrieve "15px" and not "20px"?

Ditch the style attribute, get computed style, then add the style attribute back? — nrabinowitz
– nrabinowitz, Commented Aug 20, 2015 at 17:55
@nrabinowitz: Suggest posting that as an answer (with an example). — T.J. Crowder
– T.J. Crowder, Commented Aug 20, 2015 at 17:56
But if there is CSS transition on the property, wouldn't I risk seeing a glitch by adding and removing the inline-style? — Simon Arnold
– Simon Arnold, Commented Aug 20, 2015 at 17:56

Noble Mushtak · Accepted Answer · 2015-08-20 17:58:01Z

5

Yes, of course! Just get rid of the style attribute, use getComputedStyle(), and add the style attribute back:

//Get the body's style attribute:
var bodyStyle = document.body.getAttribute("style");
//Now, get rid of it:
document.body.removeAttribute("style");
//Now use getComputedStyle() to compute the font size of the body and output it to the screen:
document.write( getComputedStyle(document.body).fontSize );
//Now add the style attribute back:
document.body.setAttribute("style", bodyStyle);

body { font-size: 15px; }

<body style="font-size: 20px;">
</body>

answered Aug 20, 2015 at 17:58

Noble Mushtak

1,78410 silver badges22 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

I'd've given nrabinowitz a bit more time to post his comment as an answer, or at least make the answer a CW. (Frustrating when people post answers as comments, but I always CW when I decide to repost it as an answer.)

Noble Mushtak Over a year ago

@T.J.Crowder Oh...I was already working on the code snippet before that comment was posted. It's just that I saw a new comment and responded so people would know I was making a snippet.

maaeab · Accepted Answer · 2015-08-20 18:11:29Z

0

   var a = document.getElementsByTagName('body');
   console.log (a[0].attributes.style);  // returns the current inline style
   a[0].setAttribute('style','font-size : 15px'); // change it as required

answered Aug 20, 2015 at 18:11

maaeab

3261 silver badge7 bronze badges

2 Comments

Simon Arnold Over a year ago

I'm sorry, but I think you misunderstood the question.

maaeab Over a year ago

thanks @Simon for your comment, revisiting the question, I see that I missed the point. Thanks :-)

Collectives™ on Stack Overflow

Retrieve CSS value, not inline-style value

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related