CODEWITHSUNDEEP
javascript
Simon Arnold
Simon Arnold

Reputation: 16157

Retrieve CSS value, not inline-style value

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"?

Upvotes: 4

Views: 498

Answers (2)

maaeab
maaeab

Reputation: 326

   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

Upvotes: 0

Noble Mushtak
Noble Mushtak

Reputation: 1784

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>

Upvotes: 5

Related Questions