469,289 Members | 2,188 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,289 developers. It's quick & easy.

get height of DIV

Hi,
To get the height of my DIV, I do :

myDivElement.style.height, which returns "176px". I don't want that. I
want to get 176. How could I do that, which property should I use? (I
could do a string parsing, but what a pain....)

Thanks

Jul 5 '06 #1
8 24925

sa*************@googlemail.com wrote:
Hi,
To get the height of my DIV, I do :

myDivElement.style.height, which returns "176px". I don't want that. I
want to get 176. How could I do that, which property should I use? (I
could do a string parsing, but what a pain....)

Thanks
There is no property which would return you just the number, you will
have to do string parsing. One way of doing this could be the
following:

//assuming you have your element

var height = myDiv.style.height;
height = height.split("px")[0];

Jul 5 '06 #2
Thanks for the reply. I thought I could avoid having to do that... ok
then.
web.dev wrote:
sa*************@googlemail.com wrote:
Hi,
To get the height of my DIV, I do :

myDivElement.style.height, which returns "176px". I don't want that. I
want to get 176. How could I do that, which property should I use? (I
could do a string parsing, but what a pain....)

Thanks

There is no property which would return you just the number, you will
have to do string parsing. One way of doing this could be the
following:

//assuming you have your element

var height = myDiv.style.height;
height = height.split("px")[0];
Jul 5 '06 #3
sa*************@googlemail.com said the following on 7/5/2006 12:31 PM:
Thanks for the reply. I thought I could avoid having to do that... ok
then.
valueWithoutPX = parseInt(valueWithPX,10);

P.S. This is in the FAQ.

Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jul 5 '06 #4
Use the offsetWidth and offsetHeight properties. They are properties
of the element, not the elements style node.

var theDiv = document.getElementById("theDiv");
var width = theDiv.offsetWidth;
var height = theDiv.offsetHeight;

That works in IE6 and Firefox. I haven't tested it in other browsers.

Jul 5 '06 #5
Dustin wrote:
Use the offsetWidth and offsetHeight properties. They are properties
of the element, not the elements style node.
var theDiv = document.getElementById("theDiv");
var width = theDiv.offsetWidth;
var height = theDiv.offsetHeight;
This may not always work as expected, however.

offset* properties are always the outer dimensions - including padding and
borders.
However, in a page running in "strict mode" in IE or in standards-compliant
browsers, the specified style height of 176px does _not_ include padding and
borders. So the style height and the offsetHeight may actually be different,
and you need to use the one you actually want.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jul 5 '06 #6
Thanks but it doesn't seem to work with FF :(
Randy Webb wrote:
sa*************@googlemail.com said the following on 7/5/2006 12:31 PM:
Thanks for the reply. I thought I could avoid having to do that... ok
then.

valueWithoutPX = parseInt(valueWithPX,10);

P.S. This is in the FAQ.

Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jul 6 '06 #7
sa*************@googlemail.com wrote:
Thanks but it doesn't seem to work with FF :(
The phrase "doesn't work" is meaningless.
See http://www.javascripttoolbox.com/clj/#getanswers

3. Give an accurate error message or description of what failed. Never use
the words "doesn't work". Saying that something "doesn't work" gives no
information about what was supposed to happen and specifically what happened
instead. Give more detail.

parseInt("150px",10)

will most certainly return 150 in FF, for example.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jul 6 '06 #8
Sorry I was being lazy in the description of the error...
indeed it returns 150 so I had to convert it to a string and add 'px'.
All works fine now
thank you
Matt Kruse wrote:
sa*************@googlemail.com wrote:
Thanks but it doesn't seem to work with FF :(

The phrase "doesn't work" is meaningless.
See http://www.javascripttoolbox.com/clj/#getanswers

3. Give an accurate error message or description of what failed. Never use
the words "doesn't work". Saying that something "doesn't work" gives no
information about what was supposed to happen and specifically what happened
instead. Give more detail.

parseInt("150px",10)

will most certainly return 150 in FF, for example.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jul 6 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Stanimir Stamenkov | last post: by
5 posts views Thread by Secret Guy | last post: by
5 posts views Thread by Kevin Myers | last post: by
1 post views Thread by Mike Collins | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.