471,896 Members | 1,831 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,896 software developers and data experts.

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 25031

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
reply views Thread by zermasroor | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.