...

View Full Version : How to get pixel height of a div?



amnesia
08-20-2005, 05:53 AM
Hello...

Just curious on what I am doing wrong: I want to get the pixelHeight of a div called content and assign it to a variable. Then I want to use that variable as the css top position property for another div.

I'm new to Javascript, but am learning it.

Right now I am just having trouble assigning the variable. I get 'undefined' when I try to output the variable to the browser.

Here's the code :

<script language="javascript">

var divh = document.getElementById('top').style.pixelHeight;

</script>
</head>
<body>
<!-- output divh -->
<script language="javascript">
document.write(divh);
</script>


this gives me

undefined

in my browser

What am I doing wrong??

Thanks
Kevin

Single Paradox
08-20-2005, 05:54 AM
var divh = document.getElementById('top').style.height;

amnesia
08-20-2005, 06:04 AM
Thanks Single Paradox...

But I still get an undefined error...




<script language="javascript">
var divh = document.getElementById('top').style.height;
//test = "hi there";

</script>
</head>
<body>
<!--
Start Header Layout
-->
<script language="javascript">
document.write(divh);
</script>
<div id="layout" class="layout">
<div id="upperleftcorner" class="upperleftcorner"></div>
<div id="upperrightcorner" class="upperrightcorner" ></div>
<div id="top" class="top" ></div>

Mongus
08-20-2005, 06:12 AM
Part of your problem is that you're trying to reference divs that don't exist yet. Your JavaScript is being evaluated inline as it is read. Your divs haven't been created yet and can't be accessed through the DOM yet. You may be able to access them with inline JavaScript if your JavaScript appears after your divs are declared in the HTML.

Also the code given earlier will only give you the height if you have already defined it through CSS. You can get the actual height of the div whether or not you have set it through CSS like this:


var divh = document.getElementById('top').offsetHeight;

coothead
08-20-2005, 06:20 AM
Hi there amnesia,

and a warm welcome to these forums. :)

Here is a working example...

<script type="text/javascript">
<!--
onload=function() {

var divh = document.getElementById('top').offsetHeight;

alert(divh +"px");

}
//-->
</script>

</head>
<body>

<div id="top" class="top" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</div>

coothead

amnesia
08-21-2005, 02:21 AM
This helped me figure this out!

thank you alot! This is a great forum, glad I found it.

here is how I did it:


<script language="javascript">
var divh = document.getElementById('leftmenucontent').offsetHeight;
var ttldiv = divh + 1;
document.write ('<div id = "bottommudules" style = "position: absolute; height: 50px; width: 975px; left: 0px; top:' + ttldiv + 'px; z-index: 12; background-color: #CCCCCC;>"')
alert(ttldiv);

</script>

Thanks again
Kevin

magiel
11-28-2009, 08:27 PM
As you can see from the example

Element.height
Element.heightoffset
Element.clientHeight
Element.style.height

don't return me the actual height after changing the content of a div. I just cannot believe it is impossible not to be able to retrieve the height after the browser processed the HTML. Help would be appreciated in any way. Thanks in advance.


<html>
<head>
<script type="text/javascript">
function getElementFromEvent(e)
{
var targetElement
if (!e) var e = window.event
if (e.target) targetElement = e.target
else if (e.srcElement) targetElement = e.srcElement
if (targetElement.nodeType == 3) // deal with Safari bug
targetElement = targetElement.parentNode
getElementProperties(targetElement);
}

function getElementProperties(targetElement)
{
targetClass=targetElement.className;
if (!targetClass=="controls"||targetClass=="") {
targetTagType=targetElement.tagName;
targetId=targetElement.id;
targetHeight=targetElement.height;
targetOffsetHeight=targetElement.heightoffset;
targetClientHeight=targetElement.clientHeight;
targetStyleHeight=targetElement.style.height;
targetComputedStyleHeight=getStyle(targetId,"height");

alert("You clicked on a " + targetTagType + " element.\nId = " + targetId + "\n\nHeight = " + targetHeight + "\nHeight Offset = " + targetOffsetHeight + "\nClient Height = " + targetClientHeight + "\nStyle Height = " + targetStyleHeight + "\nComputed Style Height = " + targetComputedStyleHeight)
}
}

function getStyle(targetElement,styleProp)
{
if (targetElement) {
if (targetElement.currentStyle) return targetElement.currentStyle[styleProp];
else if (window.getComputedStyle) return document.defaultView.getComputedStyle(targetElement,null).getPropertyValue(styleProp);
}
}

var gv_NrOfLines=0;

function addTekst()
{
gv_NrOfLines+=1;
updateValue(document.getElementById("chkAddUp").checked);
}

function removeTekst()
{
gv_NrOfLines-=1;
if (gv_NrOfLines<0) gv_NrOfLines = 0;
updateValue(document.getElementById("chkAddUp").checked);
}

function updateValue(addOnTop)
{
var currentLineTekst = "Some new Text.";
document.getElementById("divId").innerHTML="";
if (addOnTop) {
for (lineIndex=gv_NrOfLines;lineIndex>0;lineIndex--)
{
document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";
}
}
else
{
for (lineIndex=0;lineIndex<gv_NrOfLines;lineIndex++) {
document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";
}
}
}
</script>
</head>

<body onmousedown="getElementFromEvent(event)">

<h2>This is a header</h2>
<p id="pId">This is a paragraph. Click on this paragraph, the header, the div or the image to see different height property values.</p>
<input id="btnaddTekst" class="controls" value="add Tekst" type="button" onMouseDown="addTekst();">
<input id="btnremoveTekst" class="controls" value="remove Tekst" type="button" onMouseDown="removeTekst();">
<input id="chkAddUp" class="controls" type="checkbox" checked="checked">Add on Top/Bottum
<div id="divId">Some Text in a div with id = divId</div>
<p><img id="imgId" alt="Add youre image."></p>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum