What is the difference between height, scrollHeight and style.height

[jadeite100]

Hi:

I have a IFrame called "dataFrame". Does anybody know the difference between

document.getElementById('dataFrame').height

and

document.getElementById('dataFrame').Document.body.scrollHeight;

and

document.getElementById('dataFrame').style.height

function shrinkIFrame() {

var theFrame=document.getElementById('dataFrame');
var header,headerHeight,footer,navPrimaryMenu,navPrimaryMenuHeight,mainMenu2,iFrameHeight,mainMenu2Heigh t,wholeWindowHeight;
var totalHeight,differenceHeight;

if(theFrame){

theFrame.style.display="block"
if(theFrame.Document && theFrame.Document.body.scrollHeight)
{


header=parent.document.getElementById('Header2');
navPrimaryMenu=parent.document.getElementById('navPrimaryMenu');
mainMenu2=parent.document.getElementById('mainMenu2');

headerHeight = header.offsetParent.offsetHeight;
navPrimaryMenuHeight=navPrimaryMenu.scrollHeight;
mainMenu2Height=mainMenu2.scrollHeight;
wholeWindowHeight=document.body.offsetHeight;
iFrameHeight =theFrame.Document.body.scrollHeight;

totalHeight =headerHeight+mainMenu2Height+navPrimaryMenuHeight;

differenceHeight = wholeWindowHeight - totalHeight;



//alert("differenceHeight: " + differenceHeight);

if (iFrameHeight > differenceHeight)
{
// 92 represent the row header, one row and the scrollbar
//alert("iFrameHeight > differenceHeight");
if (differenceHeight > 92)
{

theFrame.style.height=differenceHeight+ 'px';
}
else
{
alert("theFrame.height:"+theFrame.height+"theFrame.Document.body.scrollHeight:"+theFrame.Document.bo dy.scrollHeight);
alert("differenceHeight:"+differenceHeight+"theFrame.style.height:"+theFrame.style.height);

theFrame.height=theFrame.Document.body.scrollHeight;

}

}
else
{

theFrame.style.height = differenceHeight +'px';
}


}
if(theFrame.attachEvent){

theFrame.detachEvent("onload", readjustIframe)
theFrame.attachEvent("onload", readjustIframe)
}
}

}

Yours,

Frustrated

[toicontien]

In your case, .height refers to the value in the IFRAME's height HTML attribute. The .style.height refers to a CSS property set in the style attribute of the IFRAME tag. The .scrollHeight is the height in pixels of the scrollable area of the IFRAME. If something is taller than the scrollHeight, then scrollbars will appear on the IFRAME.

[jadeite100]

Hi:

Can you please tell me what is the
parent.document.getElementById('dataFrame').offsetHeight


Thanks.

[toicontien]

In JavaScript, parent is a key word that allows you access to the current frame's, parent frame's window object. So:

window: The window object of the current frame

parent: The window object of this window's parent frame. It can also be written as window.parent.

That snippet of code says "Get the HTML tag whose Id is 'dataFrame' in the parent frame's document." And the ".offsetHeight" part is a DOM node property that is the height of an element, including any margins, padding and borders.