元素的大小

获取元素的大小

Element接口提供了众多属性用于获取元素的各种大小值（单位像素），这些属性通常为只读，并且只有元素已经在DOM树中且CSS属性的display不为none时才有效。

元素的实际大小

元素的实际大小就是元素在页面中实际所占控件的大小，包括边框，滚动条，但不包括外边距。

Element.offsetHeight
元素的高度。
Element.offsettWidth
元素的宽度。

另外，通过调用Element.getBoundingClientRect()方法也可以获得元素的实际大小，该方法同时还返回元素其相对于视口的位置。

元素客户区的大小

元素的客户区的大小就是指元素内容及其内边距所占空间的大小，包含内边距，但不包括水平滚动条、边框和外边距

Element.clientHeight
元素的客户区高度。
Element.clientWidth
元素的客户区宽度。

元素滚动区域的大小

如果元素的CSS属性overflow没有被设置成none，元素的内容多至显示不下时将会被滚动显示。使用scrollWidth和scrollHeight属性可以获取元素的滚动区域即整个内容的大小。

Element.scrollHeight
元素的滚动区域高度。
Element.scrollWidth
元素的滚动区域宽度。

另外scrollLeft和scrollTop属性可以用来获取和设定的元素的滚动位置。

页面和视口

页面的大小

页面的大小指的是整个页面文档的大小，标准方法是利用document.documentElement(HTML元素)的scrollWidth和scrollHeight属性。

document.documentElement.scrollWidth
整个文档的宽度
document.documentElement.scrollHeight
整个文档的高度

视口的大小

视口指浏览器窗口中看到的那部分网页面积，标准方法是利用document.documentElement(HTML元素)的clientWidth和clientHeight属性。这两个属性的返回值不包括整个文档的滚动条，也不包括<html>元素的边框和外边距，但包括<html>元素的内边距。

document.documentElement.clientWidth
视口的宽度
document.documentElement.clientHeight
视口的高度

其他还有以下方法，不过获取的值可能与标准方法获取的值的范围有所差别。

document.body.clientHeight/document.body.clientWidth
不包括整个文档的滚动条，也不包括<html>元素的边框，也不包括<body>的边框和滚动条。
document.body.offsetHeight/document.body.offsetWidth
不包括整个文档的滚动条，也不包括<html>元素的边框，包括<body>的边框和滚动条。
window.innerHeight/window.innerWidth
包括整个文档的滚动条及<html>元素的边框。

工具函数列表

uDOMlib所提供的工具函数之中，有一部分与元素大小相关，下面列出部分函数的源代码实现以供参考。

boundingRect

boundingRect : function(node,coords) {
    if (coords === undefined) {
        return node.getBoundingClientRect()
    } else {
        this.boundingPosition(node,coords);
        this.size(node,coords);
        return this;
    }
}

clientSize

clientSize : function(node) {
    return {
        width: node.clientWidth, 
        height: node.clientHeight
    };
}

contentRect

contentRect : function(node) {
     var cs = this.clientSize(node),
         pex = this.paddingExtents(node);
     return {
        left: pex.left, 
        top: pex.top, 
        width: cs.width - pex.left - pex.right, 
        height: cs.height - pex.top - pex.bottom
     };
}

height

height : function(node,value) {
    if (value == undefined) {
        return this.size(node).height;
    } else {
        return this.size(node,{
            height : value
        });
    }
}

pageRect

pageRect : function(node,coords) {
    if (coords === undefined) {
        var obj = node.getBoundingClientRect()
        return {
            left: obj.left + window.pageXOffset,
            top: obj.top + window.pageYOffset,
            width: Math.round(obj.width),
            height: Math.round(obj.height)
        }
     } else {
        this.pagePosition(node,coords);
        this.size(node,coords);
        return this;
     }
}

rect

rect : function(node,coords) {
    if (coords === undefined) {
        var // Get *real* offsetParent
            offsetParent = this.offsetParent(node),
            // Get correct offsets
            offset = this.boundingRect(node),
            parentOffset = this.boundingPosition(offsetParent),
            mex = this.marginExtents(node),
            pbex = this.borderExtents(offsetParent);

        // Subtract parent offsets and element margins
        return {
            top: offset.top - pbex.top - mex.top,
            left: offset.left - pbex.left - mex.left,
            width: offset.width,
            height: offset.height
        }
    } else {
        this.position(node,coords);
        this.size(node,coords);
        return this;
    }
}

size

size : function(node,dimension) {
    if (value == undefined) {
        return {
            width : node.offsetWidth,
            height : node.offsetHeight
        }
    } else {
        var isBorderBox = this.css(node, "boxSizing") === "border-box",
            props = Object.clone(dimension);
            if (!isBorderBox) {
                var pex = this.paddingExtents(node),
                    bex = this.borderExtents(node);
                if (props.width !== undefined) {
                     props.width = props.width-pex.left-pex.right-bex.left-bex.right;
                }

                if (props.height !== undefined) {
                    props.height = props.height-pex.top-pex.bottom-bex.top-bex.bottom;
                }
           }
           styler.css(props);
           return this;
    }
}

width

width : function(node,value) {
    if (value == undefined) {
        return this.size(node).width;
    } else {
        return this.size(node,{
             width : value
        });
    }
}


跳至内容顶部

目录