offsetWidth clientWidth scrollWidth的区别

学习笔记记录一下（以后备查）

offsetWidth(Height):网页可见区域的宽(高),包括边线的宽；(width+padding+border)

　　 clientWidth(Height):网页可见区域的宽(高)；

　　 scrollWidth(Height):网页正文的宽（高）;获取对象的滚动条宽度。

　　 screenWidth(Height):屏幕分辨率的宽(高);

时间： 2024-10-07 05:31:19

offsetWidth clientWidth scrollWidth的区别的相关文章

offsetWidth clientWidth scrollWidth 的区别

了解 offsetWidth clientWidth scrollWidth 的区别最近需要清除区分开元素的width,height及相应的坐标等,当前这篇用来区分offsetWidth clientWidth scrollWidth的区别各自的概念假设有一个元素,width有以下几个进行组合 content padding-left padding-right scrollbar 垂直的滚动条宽度(假设有,没有便为0) border-left border-right clientWid

offsetWidth clientWidth scrollWidth 三者之间的区别和联系

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 如果没有被卷去的宽度,则scrollWidth等于clientWidth, offsetWidth 多出了滚轴区域宽度. 有了被卷去宽度,则如上图所示

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox等. 一.测试1:无滚动条时,dom对象的offsetWidth.clientWidth和scrollWidth (1)测试代码 <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset=&q

JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft

document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clientHeight 获取body元素对象的内容可视区域的高度,即clientHeight=height+padding,不包括滚动条. 浏览器兼容性在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的.所以当给body设置width和height时,在IE7中clientWidth

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (windows.innerHeight) winHeight = windows.innerHeight; el

js的offsetWidth,clientWidth及offsetParent

js元素的offsetWidth与clientWidth很相似,因此放在一起记录. 1.clientWidth与offsetWidth clientWidth=元素内容区域宽度+水平内边距padding. offsetWidth=元素的内容区域宽度+水平内边距padding+边框的宽度. 因此,可以认为: offsetWidth=clientWidth+边框宽度. 通过实例验证下: <div style="width:500px;height:300px;background-color:

JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen

clientWidth offsetWidth scrollWidth的区别

scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变. offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变. 一个scrollWidth和clientWidth的例子: <html> <head> <title>77.htm文件</title> </hea

JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth，clientTop和clientLeft等区别

下面说的这三种宽,都是基于元素被加入到DOW渲染树后,也就是被添加到页面中以后,才可以获取.并且图片这类后加载元素无法获取宽. clientWidth 客户宽 offsetWidth 偏移宽 scrollWidth 滚动宽直接获取样式的宽度得到的是样式值,带有px单位. 通过 div.clientWidth 获取到的是样式的数值,是没有单位的.他们一个是字符串,一个是数值. div.clientWidth 的值是 width+padding ,有滚动条的时候:width+paddin