I have a problem getting the height of a (the one in the code below, with class="post_div"). And I want to return with a document.write whitin the HTML body - maybe later using it as height for other elements, that I want to be equal. I have tried every possible code for getting the height of such an element, but every time it returns 'undefined'. I have also tried setting height=auto for the DIV. I am almost sure my problem not has to do with the way I get the height, but have no other idea for what else it could be! Therefore I have choosen to bother you with the full structure of my coding. The JavaScript is placed in a separate document containing only the following statement:
var result=document.getElementById('postHeight').offsetHeight;
My HTML document looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" media="all" href="C:\Users\Lasse\Desktop\hg2\hg2.css" />
<script src="C:\Users\Lasse\Desktop\hg2\hg2.js"></script>
</head>
<body>
<script>document.write(result)</script>
<div id="postHeight" class="post_div">
...
</div>
</body>
</html>
Hope you can help! Thanks!
I have a problem getting the height of a (the one in the code below, with class="post_div"). And I want to return with a document.write whitin the HTML body - maybe later using it as height for other elements, that I want to be equal. I have tried every possible code for getting the height of such an element, but every time it returns 'undefined'. I have also tried setting height=auto for the DIV. I am almost sure my problem not has to do with the way I get the height, but have no other idea for what else it could be! Therefore I have choosen to bother you with the full structure of my coding. The JavaScript is placed in a separate document containing only the following statement:
var result=document.getElementById('postHeight').offsetHeight;
My HTML document looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" media="all" href="C:\Users\Lasse\Desktop\hg2\hg2.css" />
<script src="C:\Users\Lasse\Desktop\hg2\hg2.js"></script>
</head>
<body>
<script>document.write(result)</script>
<div id="postHeight" class="post_div">
...
</div>
</body>
</html>
Hope you can help! Thanks!
Share Improve this question edited Nov 18, 2012 at 14:56 labowhat asked Nov 18, 2012 at 14:42 labowhatlabowhat 1571 gold badge1 silver badge8 bronze badges2 Answers
Reset to default 12There is no element with the ID postHeight. Perhaps you meant
var result=document.getElementById('content').offsetHeight;
Additionally, this calculation must be done after the element you are calculating has been loaded (so either by putting the <script> after the element, or deferring execution with onload or similar).
Since your script tag occurs before the element exists in the DOM, you can't get the height. You could put an event handler waiting for the document to load before getting the height or move that script to the bottom of the page, but your document.write would still be called before the element existed. You need to rethink your design.
Sample code:
<div id=getme>
some text to give it height.
</div>
<script>
document.write(document.getElementById("getme").clientHeight);
</script>