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,mainMenu2Height,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.body.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

[Bob90]

I believe that .height is the depreciated way to get and set the height and the new way is .style.height as it moves all the display properties of the element into a single attribute.

.scrollHeight is the number of pixels the user has scrolled down a page.
It starts at the top from 0 and as the user scrolls downwards the number goes up.

[jscheuer1]

.scrollHeight is the number of pixels the user has scrolled down a page.
It starts at the top from 0 and as the user scrolls downwards the number goes up.

Nope, that's scrollTop. Many of the various scroll getters and/or setters are limited to IE while others are supported in most browsers, some are supported in a few browsers. When working with these things it is important to determine if the method you are using is a setter and getter or just a getter. The Document.body property (which, when supported, returns the document.body object of the page in the iframe) of an iframe is, I believe, IE only and not to be confused with the document.body object of any given page. Other browsers represent this property of an iframe in various other ways. Cross browser scripting in this area is tricky, to say the least. In IE, scrollHeight is similar to offsetHeight and clientHeight, but it would depend upon the object, and that in turn can depend upon the DOCTYPE.

In the end, it really depends upon what you are trying to do.

quirksmode.org has a section on many of these types of issues.