大家好,又见面了,我是你们的朋友全栈君。
对象尺寸会涉及width和height,我们以width为例,height则是一样的道理。
1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。
clientWidth = 元素width + padding
2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。
无滚动时等于clientWidth,有滚动时,需要计算
3、offsetWidth:对象的可见宽度,包括滚动条等边线,会随窗口的显示大小改变。
offsetWidth = 元素width + padding + border
CSS中的margin属性,与clientWidth、offsetWidth均无关
4、width:不包括滚动条和工具条的宽度。
5、innerWidth:窗口中文档显示区域的宽度,不包括菜单栏、工具栏等部分,该属性可读可写。注意,IE浏览器不支持该属性。
6、outerWidth:窗口中文档显示区域的宽度,包含菜单栏、工具栏等部分。
获取outerWidth有两个jquery方法
outerWidth():outerWidth = padding + border
outerWidth(true): outerWidth = margin + padding + border
注意事项:
1.获取这些尺寸信息时,clientWidth、scrollWidth和offsetWidth用<document.getElementById(‘Id’).属性>形式获取,它们是javascript对象属性,没有jquery方法。
2.有jquery方法的是: width()、 innerWidth()、outerWidth()、outerWidth(true)
3.一般情况下 width() <= innerWidth() <= outerWidth() <= outerWidth(true)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163057.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...