各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

1、clientWidth、offsetWidth、scrollWidth

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#content {width: 1200px;height: 1200px;}</style></head><body><div id="box1"><div id="box"><div id="content">aaaaa</div></div></div></body><script>var a = document.getElementById("box");console.log(a.clientWidth);console.log(a.scrollWidth);console.log(a.offsetWidth);console.log(a.clientLeft);console.log(a.offsetLeft);console.log(a.scrollLeft);</script>
</html>

2、getBoundingClientRect

getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#content {width: 1200px;height: 1200px;}</style></head><body><div id="box1"><div id="box"><div id="content">aaaaa</div></div></div></body><script>var a = document.getElementById("box");console.log(a.clientWidth);console.log(a.scrollWidth);console.log(a.offsetWidth);console.log(a.clientLeft);console.log(a.offsetLeft);console.log(a.scrollLeft);console.log('=============================')var b = a.getBoundingClientRect();console.log(b.left)console.log(b.right)console.log(b.top)console.log(b.bottom)</script>
</html>

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解相关推荐

图解clientWidth,offsetWidth,scrollWidth
关于clientWidth,offsetWidth,scrollWidth的文章很多,但我一直不太注意他们的区别,这里贴上自己尝试的图和一些文字说明帮助大家比较直观的看到他们的区别 clientWid ...
距总决赛还有100天！详解沃顿KWHS全球投资挑战赛
距总决赛还有100天!详解沃顿KWHS全球投资挑战赛原创: Xiao 燊知 1月25日沃顿 KWHS 全球投资挑战赛沃顿商学院宾夕法尼亚大学的沃顿商学院成立于1881年,当时美国费城企业家Jo ...
JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: 1.width()方法用于获得元素内容所占的宽度: 2.innerWidth()方法用于获得包括内边界(padding)的元素宽度: 算式:innerWidth()=width()+ ...
clientWidth offsetWidth scrollWidth区别
clientWidth: 元素内部宽度,即可视内容区域宽度, 它包括左侧padding宽度加上可视内容宽度再加上右侧padding宽度.也即元素左边界内侧到右边界内侧的距离(再减去滚动条的宽度如果有滚 ...
Html元素的scrollWidth和scrollHeight详解 .
上网搜了一下scrollWidth和scrollHeight,大部分都是转帖,也没有具体说清楚,这两个属性值是什么,也没有图. 索性自己测试一下,包含的浏览器有IE 6,IE 7,IE 8,IE 9, ...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释 scrollHeight: 获取对象的滚动高度. scroll ...
完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth
from:http://www.cnblogs.com/mguo/archive/2013/03/19/2969657.html HTML源码DOM的offsetLeft,Left,clientLef ...
JS中clientWidth offsetWidth innerWidth scrollWidth等区分
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要.放上经典图,一张图让你搞懂clientWidth,offset ...
完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth【转】
有时候项目中会用到用js获取元素位置来定位元素,我在网上开了大量的图解,代码,最终把我搞的晕了,还是结合网上的自己来总结一下,首先来看看网上的: DOM的定义如下图获取元素的位置属性可以通过 ...

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解相关推荐

最新文章

热门文章