1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。 clientWidth = 元素width + padding 2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。 无滚动时等于clientWidth,有滚动时,需要计算 3、offsetWidth:对象的可见宽度,包括滚动条等边线,会随窗口的显示大小改变。
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离,或当元素内容高度超过元素本身高度时,scrollTop 指的是元素内容超出元素上边界的那部分高度。 clientLeft:元素 border-left 的 width,也可以视为 ( offsetWidth - clientWidth ) / 2。 clientTop:元素 border-top 的width ,也可视为(offsetH...
1,clientWidth的实际宽度 clientWidth = width+左右padding 2,clientHeigh的实际高度 clientHeigh = height + 上下padding 3,clientTop的实际宽度 clientTop = boder.top(上边框的宽度) 4,clientLeft的实际宽度 clientLeft = boder.left(左边框的宽度) 二、offsetWidth和offsetHight 、 offsetTop和offsetLeft 1, o...
1.在内容区没有发生溢出的情况下,scrollWidth=clientWidth因为它们都是代表内容区的宽度。 2.在内容区发生了溢出,并且设置了overflow-scroll之类的属性的情况下,clientWidth代表dom 当前状态下,实际上展示在可视区域的内容区(content)的宽度,而scrollWidth则代表了真实的内容区的宽度,包括了那些没有展现在用户面前的,...
经常需要计算元素的大小或者所在页面的位置，offsetWidth、clientWidth、scrollWidth、scrollTop 这几个关键字出现的频率更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结,文末有个简单的懒加载实现的demo，有需要的可以看一下。1. 偏移量 偏移量(offset dimension),元素的可见...
clientWidth：表示对象内容的可视区宽度，不包括滚动条等边线。随显示大小变化，可视区域宽度也会改变。offsetWidth：表示对象整体的实际宽度，包含滚动条等边线。同样随显示大小变化而改变。在情况【1】，即元素内无内容或内容未超过可视区，滚动条不可用时，scrollWidth和clientWidth值相等，都为内容的可视区...
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。 同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。 6.JavaScript窗口属性: 网页可见区域宽:document.body.clientWidth ...
在JS中的位置和宽度,也就是:clientWidth、offsetWidth、scrollWidth,clientTop和clientLeft本身上是有区别的,在获取的方式上也有着很大的区别,在元素本身上还有在html和body上获取到的信息都有着区别。 首先是获取宽高 获取宽高的方式为以下几种 元素.clientWidth客户宽高 ...
网页可见区域宽: document.body.clientWidth;用Jquery表示:$(window).width();除去滚动条后的网页可视宽度。 网页可见区域高: document.body.clientHeight;用Jquery表示:$(window).height(); 网页可见区域宽: document.body.offsetWidth (包括边线的宽);
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义。 注意: 下面元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用。