原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
offsetWidth属性可以返回元素的偏移宽度,只读属性,不能赋值。
无需纠结为什么称作偏移宽度,当然是有原因的,可能越讨论越混乱。
我们只需要知道此宽度由哪些要素构成即可,可以结合offsetHeight属性一起学习。
既然是偏移宽度,肯定与CSS中的width宽度有区别,不要想当然将它们等同。
语法结构:
[JavaScript] 纯文本查看 复制代码let num = dom.offsetWidth
图示如下:
红线之间的尺寸,就是offsetWidth属性的返回值,下面分析一下返回值的具体构成:
(1).包含元素的宽度,这个宽度是CSS的width属性指定的值。
(2).包含左右内边距的尺寸。
(3).不包含左右外边距的尺寸。
(4).包括左侧垂直滚动条的宽度。
上面的这四条总结会在后面通过代码实例进行验证。
offsetWidth属性还有两点需要再强调一下:
(1).返回值是数值,不带任何单位,但是默认单位是像素。
(2).与CSS的width不同,虽然可能在数值在相等。
(3).offsetWidth返回值会对数值进行四舍五入取整,加入实际的值是260.5,那么返回261。
如果想要获取获取精确的值,推荐使用getBoundingClientRect()方法。
浏览器兼容:
(1).IE浏览器支持此属性。
(2).edge浏览器支持此属性。
(3).谷歌浏览器支持此属性。
(4).opera浏览器支持此属性。
(5).火狐浏览器支持此属性。
(6).safria浏览器支持此属性。
代码实例:
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #box{ width:200px; height:100px; line-height:100px; border:10px solid blue; padding-left:10px; padding-right:5px; background:#ccc; text-align:center; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); odiv.innerHTML=odiv.offsetWidth; } </script> </head> <body> <div id="box"></div> </body> </html>
代码运行效果截图如下:
上述代码可以获取div元素的offsetWidth属性值,并将其写入div。
上述代码简单分析如下:
(1).属性值是数值类型,无单位。
(2).235 = width + border-left + border-right + padding-left + padding-right。
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #box{ width:200px; height:100px; line-height:100px; background:#ccc; text-align:center; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); odiv.innerHTML=odiv.offsetWidth; } </script> </head> <body> <div id="box"></div> </body> </html>
代码运行效果截图如下:
特殊情况下,offsetWidth值大小与元素width值的大小可能会相同(只考虑数值大小)。
那就是元素没有左右内边距,没有边框,没有垂直滚条的情况下。
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #box{ width:200px; height:100px; line-height:100px; background:red; text-align:center; font-size:12px; border:10px solid blue; padding-left:10px; overflow:auto; } #ant{ width:100px; height:200px; background:green; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); console.log(odiv.offsetWidth); } </script> </head> <body> <div id="box"> <div id="ant"></div> </div> </body> </html>
offsetWidth属性值谷歌开发者工具控制台截图如下:
代码分析如下:
(1).内部div高度较大,所以父div元素会出现滚动条。
(2).滚动条自然有一定的宽度(或者说厚度),当前在谷歌浏览器下宽度值为17px,其他浏览器可能不同。
(3).offsetWidth包括滚动条的宽度,滚动条是向内占据宽度,也就是滚动条不额外增加offsetWidth值。
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落
最新评论
应该是返回 261吧?
不应该是右侧吗?是不是写错了?
查看全部评论(3)