码迷,mamicode.com
首页 > 其他好文 > 详细

[翻译]理解offsetWidth,clientWidth,scrollWidth以及Height

时间:2014-09-22 21:43:43      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:style   http   使用   java   ar   sp   c   ad   line   

CSS盒模型是非常容易理解的,但当涉及到滚动的内容时,就变的复杂了。浏览器会使用你CSS中设置的值来绘制元素的盒模型,但如果只依赖于CSS中的属性值,当使用JavaScript确定元素的尺寸就不那么直观了。

所以为了计算方便,每个DOM元素都提供了6个属性:offsetWidth,offsetHeight,clientWidth,clientHeight,scrollWidth和scrollHeight。它们都是只读属性,表示了当前元素的布局属性,而且都是整数值。

offsetWidth/offsetHeight:元素的布局大小,是width/height、paddings、scrollbar(滚动条)和borders值的和。

clientWidth/clientHeight:元素的内部大小,包含padding但不包括scrollbar(滚动条)、边框和margin。

scrollWidth/scrollHeight:要素内容的大小,包含在当前视图中不可见的部分(由属性overflow引起)。它包含padding的值,但不包括margin。

bubuko.com,布布扣

[翻译]理解offsetWidth,clientWidth,scrollWidth以及Height

标签:style   http   使用   java   ar   sp   c   ad   line   

原文地址:http://www.cnblogs.com/changgong/p/3986676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!