元素大小，jQuery源码解析（DOM与核心模块）教程-慕课网

元素大小

我们总结下与HTML元素的样式息息相关的属性。

偏移量

元素的可见大小由宽度高度决定，其中还要包括内边距、滚动条、边宽大小（不包括外边距），通过下面四个属性可以获得。

offsetWidth、offsetHeigh、offsetLeft、offsetTop

offsetHeight/offsetWidth: 表述元素的外尺寸：
元素内容 + 内边距 + 边框(不包括外边距)，给出元素在页面中占据的宽度和高度的总计。

注意：把元素的边框和滚动条计算在内。

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

包含关系：
offsetLeft/offsetTop: 表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离。
offsetParent元素是指元素最近的定位（relative，absolute）祖先元素，可递归上溯。

客户区域大小

clientWidth、clientHeight

clientWidth/clientHeight: 用于描述元素的内尺寸：元素内容 + 两边内边距。

clientWidth = width+padding（left、right）
clientHeight = height+padding（top、bottom）

滚动大小

scrollWidth、scrollHeight、scrollLeft、scrollTop

scrollHeight/scrollWidth: 元素内容的总高度或宽度

scrollLeft/scrollTop：是指元素滚动条位置，它们是可写的(被隐藏的内容区域左侧/上方的像素)

scrollHeight：是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。

计算方式：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

在浏览器中的区别在于：

IE6、IE7 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。

FF、Chrome 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。

浏览器窗口的滚动条位置：window对象的 pageXoffset 和 pageYoffset , IE 8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>元素操作</title>
</head>
<body>
<div></div>
<ul>
<li>scrollHeight: 获取对象的滚动高度。</li>
<li>scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离</li>
<li>scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离</li>
<li>scrollWidth:获取对象的滚动宽度</li>
<li>offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度</li>
<li>offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置</li>
<li>offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置</li>
<li>document.documentElement.scrollTop 垂直方向滚动的值</li>
<li>event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量</li>
　
<li>以上主要指IE之中，FireFox差异如下：</li>
<li>IE6.0、FF1.06+：</li>
<li>clientWidth = width + padding</li>
<li>clientHeight = height + padding</li>
<li>offsetWidth = width + padding + border</li>
<li>offsetHeight = height + padding + border</li>
<li>IE5.0/5.5：</li>
<li>clientWidth = width - border</li>
<li>clientHeight = height - border</li>
<li>offsetWidth = width</li>
<li>offsetHeight = height</li>
</ui>
<script type="text/javascript">
show('网页可见区域宽clientWidth：' + document.body.clientWidth)
show('网页可见区域高clientHeight：' + document.body.clientHeight)
show('网页可见区域宽(包括边线的宽)offsetWidth：' + document.body.offsetWidth )
show('网页可见区域高(包括边线的宽)offsetHeight：' + document.body.offsetHeight )
show('网页正文全文宽scrollWidth：' + document.body.scrollWidth)
show('网页被卷去的高scrollTop：' + document.body.scrollTop)
show('网页被卷去的左scrollLeft：' + document.body.scrollLeft)
show('网页正文部分上screenTop：' + window.screenTop)
show('屏幕分辨率的高height：' + window.screen.height)
show('屏幕可用工作区高度availHeight：' + window.screen.availHeight)
show('屏幕可用工作区宽度availWidth：' + window.screen.availWidth)
function show(data) {
$("div").append('<li>' + data + '</li>')
}
</script>
</body>
</html>

元素大小

任务