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%'.

I included the html for the table but it doesn't show up, it's just a simple table, with th tag, id='th1'... — Fred
– Fred, Commented Nov 19, 2009 at 17:18
@Estelle, when writing the post you can either surround code examples with the a backtick either side, or indent the code by four spaces; both will cause the code to be displayed/rendered as code. You can also select the text with your mouse/keyboard and then click on the button with the 1s and 0s on it to do the same. — David Thomas
– David Thomas, Commented Nov 19, 2009 at 17:21
thanks. it's funny, I just want to say thanks but when I click Add Comment it tells me I need at least 15 characters -:) — Fred
– Fred, Commented Nov 19, 2009 at 17:30

Guillaume Flandre · Accepted Answer · 2009-11-19 17:25:16Z

2

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

answered Nov 19, 2009 at 17:25

Guillaume Flandre

9,0008 gold badges48 silver badges55 bronze badges

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

Comments

adamJLev · Accepted Answer · 2009-11-19 17:23:39Z

1

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();

answered Nov 19, 2009 at 17:23

adamJLev

14.1k11 gold badges64 silver badges65 bronze badges

Comments

Gaz · Accepted Answer · 2013-03-15 13:46:25Z

1

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

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

Should work every time.

edited Mar 15, 2013 at 13:46

user142162

answered Nov 19, 2009 at 17:18

Gaz

1,6492 gold badges18 silver badges22 bronze badges

1 Comment

Fred Over a year ago

the problem is, in above sample, it returns px instead of 100%

Collectives™ on Stack Overflow

Get CSS setting in JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related