如果div 内的内容宽度小于等于 220px (200 + 10 + 10),则scrollWidth等于clientWidth(220px),offsetWidth等于 240px (220 + 5 + 5 + 10px 假设垂直滚动条宽度为10px)。 如果div 内的内容宽度大于 220px,例如 300px,则scrollWidth等于 300px,clientWidth仍然是 220px,
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.在内容区没有发生溢出的情况下,scrollWidth = clientWidth 因为它们都是代表内容区的宽度。2.在内容区发生了溢出,并且设置了 overflow-scroll 之类的属性的情况下,clientWidth 代表dom 当前状态下,实际上展示在可视区域的 内容区(content) 的宽度,而 scrollWidth 则代表了真实的内容区的宽度,包括了那些没有展现...
style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性 style.width的值需要事先定义,否则取到的值为空。而且必须要定义在html里(内联样式),如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。
经常需要计算元素的大小或者所在页面的位置，offsetWidth、clientWidth、scrollWidth、scrollTop 这几个关键字出现的频率更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结,文末有个简单的懒加载实现的demo，有需要的可以看一下。1. 偏移量 偏移量(offset dimension),元素的可见...
scrollWidth=clientWidth,两者皆为内容可视区的宽度。 offsetWidth为元素的实际宽度。 图1 情况【2】--如图2 元素的内容超过可视区,滚动条出现和可用的情况下。 scrollWidth>clientWidth。 scrollWidth为实际内容的宽度。 clientWidth是内容可视区的宽度。 offsetWidth是元素的实际宽度。0 图2发布...
clientWidth：表示对象内容的可视区宽度，不包括滚动条等边线。随显示大小变化，可视区域宽度也会改变。offsetWidth：表示对象整体的实际宽度，包含滚动条等边线。同样随显示大小变化而改变。在情况【1】，即元素内无内容或内容未超过可视区，滚动条不可用时，scrollWidth和clientWidth值相等，都为内容的可视区...
scrollWidth,clientWidth与offsetWidth的区别scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗⼝的显⽰⼤⼩改变。offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗⼝的显⽰⼤...
scrollWidth是对象实际内容的宽度。 clientWidth是对象看到的宽度(不含边线),这个例子里不会改变。 一个clientWidth和offsetWidth的例子: 77.htm文件 <textarea wrap="off" onfocus="alert("offsetWidth:"+this.offsetWidth+" clientWidth:"+this.clientWidth);"></textarea> offsetWidth的值总是比clientWi...