offsetWidth、clientWidth、scrollWidth、scrollTop
2012-09-06 14:35
471 查看
offsetWidth/clientWidth/scrollTop…
题记:offset/client/scroll 这几组属性容易搞混,查了些资料,研究了下,写些心得。
1. 基本概念
offsetWidth/offsetHeight对象的可见宽度,包含滚动条和border。非标准属性,但各浏览器都支持
clientWidth/clientHeight
对象的可见宽度,不包含滚动条和border。
scrollWidth/scrollHeight(慎用)
元素完整的高度和宽度,overflow:hidden的部分也计算在内。
offsetLeft/offsetTop
当前元素距浏览器边界的偏移量,以像素为单位。
clientTop/clientLeft
这个属性测试下来的结果是=border。
scrollLeft/scrollTop(IE6计算方式不同)
设置或返回已经滚动到元素的左边界或上边界的像素数。
2. 比较offsetHeight/clientHeight/scrollHeight
共同点:3个值都和元素的margin无关。 差 异:offsetHeight = height+padding+border clientHeight = height+padding-滚动条的宽度(如果有滚动条) scrollHeight 获得的是元素的实际宽度影藏的部分也计算在内 备 注:1.Jquery中的css("height")/height()不计算padding/border/滚动条。 2.offsetWidth、clientWidth、scrollWidth同理。
3. 比较offsetTop/clientTop/scrollTop
offsetTop:元素相对body的Top值(元素border以外到body.padding以内)clientTop = offsetTop-(height+padding)=border
scrollTop:元素的滚动值 (可用来做滚动效果)
相关文章推荐
- JS:clientWidth、scrollWidth、offsetWidth、clientTop、scrollTop、offsetTop、offsetParent
- scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrol
- offsetTop、clientTop、offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft区别
- 深刻了解offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,clientHeight,clientWidth
- offsetTop、offsetLeft、offsetWidth、offsetHeight,scrollTop、scrollLeft、scrollWidth、scrollHeight ,clientHeight、offsetHeight
- 图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性
- scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法
- JavaScript] scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离
- document.body.clientWidth、scrollWidth、scrollTop;
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
- HTML: scrollLeft,scrollWidth,clientWidth,offsetWidth 详解
- scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
- scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
- javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth,offsetLeft等属性介绍
- scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离