Why does document.body.offsetHeight + document.body.bottomMargin not equal document.documentElement.offsetHeight

后端 未结 1 405
轮回少年
轮回少年 2020-11-28 16:59

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

document.body.offsetHeight + document.body.bottomMargin 

does not

相关标签:
1条回答
  • 2020-11-28 17:19

    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');
    }
    
    0 讨论(0)
提交回复
热议问题