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.
Code:
<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>
|
