Get CSS setting in JavaScript

Question

Suppose I have a table in a web page:

<table><th id='th1'></th></table>

Then I define the CSS in the header:

#th1
{width: 100%;}

The question is, how to get the CSS width using JavaScript? I tried width, style.width, and jQuery("#th1").css("width"), but neither of them give me the result of '100%'.

Answer 1

<h1 id="myHeader">Text</h1>

$('#myHeader').css('width');

Should work every time.

Cheers, Gaz.

Answer 2

Just in case, if you want to get the actual current width in pixels, not what the CSS width says, you can do:

$('#th1').width();

Answer 3

I think there's no way to get the percentage value you specified in your CSS file for your element width.

A solution would be to calculate it like this :

HTML:

<h1 id="header">Hello, World</h1>

Javascript (jQuery):

var percentageWidth = (($("#header").width()*100)/$("#header").parent().width())+"px";