为什么document.body.offsetHeight + document.body.bottomMargin不等于document.documentElement.offsetHeight [英] Why does document.body.offsetHeight + document.body.bottomMargin not equal document.documentElement.offsetHeight

问题描述

我试图锻炼iFrame的高度，不明白为什么

  document.body.offsetHeight + document .body.bottomMargin 
  

不等于

<$所有其他边距设置时，p $ p> document.documentElement.offsetHeight


为零，底部边距具有低于16px的值。

一旦底边距超过16px，上述两个值在FireFox中相等，并且在Chrome内的1px内

奇怪的是，这个问题并不影响宽度计算。

解决方案

p>经过很多挖掘，我想出了解决这个问题。

  function getIFrameHeight（）{
 function getComputedBodyStyle（prop）{
 return parseInt（
 document.defaultView.getComputedStyle（document.body，null），
 10 
）; 
} 
 
 return document.body.offsetHeight + 
 getComputedBodyStyle（'marginTop'）+ 
 getComputedBodyStyle（'marginBottom'）; 
} 
  

和IE8及更低版本的扩展版本。

 函数getIFrameHeight（）{
函数getComputedBodyStyle（prop）{
函数getPixelValue（value）{
 var PIXEL = ^ \d +（PX）$ /我？; 
 
 if（PIXEL.test（value））{
 return parseInt（value，base）; 
} 
 
 var 
 style = el.style.left，
 runtimeStyle = el.runtimeStyle.left; 
 
 el.runtimeStyle.left = el.currentStyle.left; 
 el.style.left = value || 0; 
 value = el.style.pixelLeft; 
 el.style.left = style; 
 el.runtimeStyle.left = runtimeStyle; 
 
返回值; 
} 
 
 var 
 el = document.body，
 retVal = 0; 
 
 if（document.defaultView&& document.defaultView.getComputedStyle）{
 retVal = document.defaultView.getComputedStyle（el，null）[prop]; 
} else {// IE8&低于
 retVal = getPixelValue（el.currentStyle [prop]）; 
} 
 
 return parseInt（retVal，10）; 
} 
 
 return document.body.offsetHeight + 
 getComputedBodyStyle（'marginTop'）+ 
 getComputedBodyStyle（'marginBottom'）; 
} 
  

I'm trying to workout the height of an iFrame and can not understand why

document.body.offsetHeight + document.body.bottomMargin 

does not equal

document.documentElement.offsetHeight

when all other margins are set to zero and the bottom margin has a value below 16px.

Once the bottom margin is more than 16px the above two values equal each other in FireFox and are within 1px in Chrome.

Strangely this problem doesn't effect the width calculation.

解决方案

After much digging around I came up with this to solve the problem.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        return parseInt(
            document.defaultView.getComputedStyle(document.body, null),
            10
        );
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

and an expanded version for IE8 and below.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

这篇关于为什么document.body.offsetHeight + document.body.bottomMargin不等于document.documentElement.offsetHeight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！