labowhat
labowhat

Reputation: 157

Getting the height of a <DIV> - returns 'undefined'

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!

Upvotes: 8

Views: 24572

Answers (2)

Dennis
Dennis

Reputation: 32598

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>

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

There 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).

Upvotes: 12

Related Questions