How do I query for an element's size in Javascript?
-
I have an element on my web page. I'd like to discover the size of the element from within Javascript code.
var eleHeight = document.getElementById('myelement').style.height; alert('the height is ' + eleHeight);The alert just shows 'the height is '. What am I doing wrong? I'm able to set the height of an element, but I don't seem to be able to read it. I'd like to position elements absolutely using their size. Without being able to query for their size it'll be tough to do this. -
I have an element on my web page. I'd like to discover the size of the element from within Javascript code.
var eleHeight = document.getElementById('myelement').style.height; alert('the height is ' + eleHeight);The alert just shows 'the height is '. What am I doing wrong? I'm able to set the height of an element, but I don't seem to be able to read it. I'd like to position elements absolutely using their size. Without being able to query for their size it'll be tough to do this.Did you set the height for your element? <div id="myelement" style="height:100px;" />
Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net)
-
I have an element on my web page. I'd like to discover the size of the element from within Javascript code.
var eleHeight = document.getElementById('myelement').style.height; alert('the height is ' + eleHeight);The alert just shows 'the height is '. What am I doing wrong? I'm able to set the height of an element, but I don't seem to be able to read it. I'd like to position elements absolutely using their size. Without being able to query for their size it'll be tough to do this.Check out the clientHeight[^] and offsetHeight[^] properties. With a bit of thought, you can probably make them work for what you need. As Michael mentioned, you'll need to set an explicit height in order to use the
style.*properties.----
...the wind blows over it and it is gone, and its place remembers it no more...
-
Did you set the height for your element? <div id="myelement" style="height:100px;" />
Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net)
no, there is no size set for the element. at runtime, I fill it in with text and its size changes based on how much text is used. I need to find out dynamically what the actual size turned out to be.
-
Check out the clientHeight[^] and offsetHeight[^] properties. With a bit of thought, you can probably make them work for what you need. As Michael mentioned, you'll need to set an explicit height in order to use the
style.*properties.----
...the wind blows over it and it is gone, and its place remembers it no more...
Thanks! The clientHeight did the trick and seems to have worked in both IE and FireFox :) Adding more text to the element, which caused it to grow, resulted in the larger size being provided in clientHeight. Interestingly, I have the O'Reilly Javascript book and it says nothing about this property. I'm not complaining of course, as the code is now working :)
-
no, there is no size set for the element. at runtime, I fill it in with text and its size changes based on how much text is used. I need to find out dynamically what the actual size turned out to be.
Dave Calkins wrote:
there is no size set for the element. at runtime
If you don't set the height explicitly, you will get nothing from style.height. So, As Slang suggested, try to use clientHeight and offsetHeight..
Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net)
-
Dave Calkins wrote:
there is no size set for the element. at runtime
If you don't set the height explicitly, you will get nothing from style.height. So, As Slang suggested, try to use clientHeight and offsetHeight..
Thanks and Regards, Michael Sync ( Blog: http://michaelsync.net)
Thanks, yes, clientHeight worked.