元素的大小
获取元素的大小
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
});
}
}