记录一个有关offsetWidth的怪异问题

offsetWidth 是什么？从外形上来看，它和width很像，其实offsetWidth是取得一个DOM对象的border + padding + width的和。果然是和width属性是有关联的啊。
我们认识了offsetWidth后，看一下以下的代码，看看offsetWidth返回的值是什么。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>offsetWidth的怪异问题</title><style>.img-wrap {width: 520px;height: 280px;position: relative;margin: 100px auto 0;border: 1px solid #F00;}.img-wrap ul {position: absolute;left: 0;top: 0;margin: 0;padding: 0;}.img-wrap ul li {list-style: none;float: left;}.img-wrap ul li img {display: block; /* 消除img的魔鬼间距 */}</style>
</head>
<body>
<div class="img-wrap"><ul><li><img src="./image/aa.webp"/></li><li><img src="./image/bb.jpg"/></li><li><img src="./image/cc.jpg"/></li><li><img src="./image/ee.webp"/></li></ul>
</div>
<script>var oImgWrap = document.querySelector('.img-wrap');var oUl = document.querySelector('ul');var aLi = oUl.getElementsByTagName('li');var aWidth = aLi[0].offsetWidth;console.log(aWidth);// 输出的值是什么？console.log(oUl.offsetWidth); // 输出的值是什么？
</script>
</body>
</html>

这里我要补充说明的是，代码中引入的图片的规格都是520 * 280的(单位：px)。所以以上代码输出的值是什么？520吗？很让人意外的是输出的是0。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>幻灯片</title><style>.img-wrap {width: 520px;height: 280px;position: relative;margin: 100px auto 0;border: 1px solid #F00;}.img-wrap ul {position: absolute;left: 0;top: 0;margin: 0;padding: 0;}.img-wrap ul li {list-style: none;float: left;}.img-wrap ul li img {display: block; /* 消除img的魔鬼间距 */}</style>
</head>
<body>
<div class="img-wrap"><ul><li><img src="./image/aa.webp"/></li><li><img src="./image/bb.jpg"/></li><li><img src="./image/cc.jpg"/></li><li><img src="./image/ee.webp"/></li></ul>
</div>
<script>
window.onload = function () {var oImgWrap = document.querySelector('.img-wrap');  var oUl = document.querySelector('ul');var aLi = oUl.getElementsByTagName('li');var aWidth = aLi[0].offsetWidth;console.log(aWidth); // 520console.log(oUl.offsetWidth);// 520
}
</script>
</body>
</html>

这段代码比上段代码多出了一句window.onload = function () {}，这句话的作用是当文档内容或者图片加载完毕后再执行里面的代码，我们发现offsetWidth的值被正确的获取到了，可是按照我的理解，最初的那段代码的js是放在最后面的，按道理来说，执行输出offsetWidth值得时候，文档和图片都应该是加载完毕了的，不应该会出现获取不到offsetWidth值得情况呀。这种怪异的现象先记录在此，以后写代码的时候尽量要写上window.onload = function() {}。

记录一个有关offsetWidth的怪异问题相关推荐

记录一个海思TOE的BUG
原始引用地址: 记录一个海思TOE的BUG time: 2020.5.3 17:57 发现的过程最近在做onvif开发时,有x86的验证的功能没有问题,移动到海思Hi3536上简单运行貌视也很正 ...
复习Java第一个项目学生信息管理系统 04（权限管理和动态挂菜单功能） python简单爬数据实例Java面试题三次握手和四次挥手生活【记录一个咸鱼大学生三个月的奋进生活】016
记录一个咸鱼大学生三个月的奋进生活016 复习Java(学生信息管理系统04权限管理和动态挂菜单功能) 改写MainFrame的构造方法新增LoginFrame的验证登录是否成功的代码新增Logi ...
记录一个vue监控屏幕宽度的问题
记录一个vue监控屏幕宽度的问题因为今天有查询过如何用vue监控屏幕宽度的问题,搜到的很多都是这样的写法: data() {return {screenWidth: null, //屏幕尺寸};}, ...
记录一个db2 中LISTAGG函数问题：The length resulting from “LISTAGG“ is greater than “4000“
记录一个db2 中LISTAGG函数问题什么是LISTAGG函数 LISTAGG("字段名","分隔符") as "自定义字段名" 就是将 ...
记录一个C++多线程的坑
记录一个C++多线程的坑 VS2019报错解决方案: 错误代码修改方案: 写在最后,发牢骚 VS2019报错 1>C:\Program Files (x86)\Microsoft Visua ...
记录一个CentOS 6版本中，yum install 命令无法实现的问题 # 谭子
记录一个CentOS 6版本中,yum install 命令无法实现的问题. 在初次使用yum install mysql命令时,出现了下文内容,这里的报错内容主要指向的内容是 Cen ...
复习Java小球游戏代码分享Java面试题MySQL中常用的锁生活【记录一个咸鱼大学生三个月的奋进生活】021
记录一个咸鱼大学生三个月的奋进生活021 复习Java小球游戏游戏界面的代码小球运动线程的代码运行游戏的代码运行结果代码分享学习Java面试题(MySQL中常用的锁) 照片分享复习Jav ...
记录一个bug 关于 java 解压缩包写入本地报错：java.io.FileNotFoundException(系统找不到指定的路径。)
记录一个bug 关于 java 解压缩包写入本地报错 :java.io.FileNotFoundException(系统找不到指定的路径.) 第一想法是路径问题: 1.检查文件路径是否正确 2.另外 ...
记录一个子串在整串种出现的次数（JAVA）
记录一个子串在整串种出现的次数(Java) 1. 任务描述编写一个程序,记录一个子串在整串种出现的次数,例如记录子串"nba"在整串" nbaernbatnbaynba ...

记录一个有关offsetWidth的怪异问题

记录一个有关offsetWidth的怪异问题相关推荐

最新文章

热门文章