解决使用offsetWidth让DIV自动变宽时出现的小BUG。
来源:互联网 发布:qq空间营销软件 编辑:程序博客网 时间:2024/05/16 08:57
1.首先创建一个DIV盒子。给它加一个定时器,让它的宽度每隔30毫秒自动减1,观看效果。
2.上面的效果没有问题。然后你通过给DIV添加样式,给它加1px的边框。观看效果。
3.这是你会发现,你明明让DIV宽度减1,现在它的宽度会反而变长。
4.这是为什么呢?很明显这是加1px边框引起的问题。解释:因为offsetWidth是包含边框,外边距,内边距,
而DIV的宽度是100px。当你给加1px边框是,offsetWidth=100+2=102,102-1=101。这反而让DIV的宽度反而
增加了一个像素。所有看到的效果就是。DIV的宽度反而增加。
5.那么我们要怎么解决这个bug呢?其实很简单,我们直接给它加行内样式再改js的一行代码就可以解决。如
下图。
6.但是,我们这不是在解决问题,而且现在也不会加行内样式。所以我们要真的解决这个问题。
7.分析发现,其实真正是offsetWidth有问题,那我们就可以想,可不可以把offsetWidth换成其它的代替。
其实是可以的,我们可以创建一个函数,获取div的宽度,然后用函数代替。如下图
8.这才是我们最终要解决的方法。总结:offsetWidth还有很多相识的问题存成,所以我们要尽量少使用
offsetWidth,最好自己定义一个获取样式的函数在开发中调用。
阅读全文
1 0
- 解决使用offsetWidth让DIV自动变宽时出现的小BUG。
- Js:offsetWidth的Bug
- JS运动之offsetWidth属性的小bug
- 小bug的解决
- 解决bug的小方法
- 多个div变宽
- 使用FtpWebRequest下载时出现的Bug
- 抛弃系统Toast 让提示更优雅,解决toast的连续提示小bug
- JavaScript中offsetWidth的'bug'及其对策
- div的变宽和变高 _复杂版
- ASP.NET程序运行时出现的一个小BUG
- 让div自动适应内容的高度
- 让div自动适应内容的高度
- 项目中出现的小bug
- python中出现的小bug
- JAVAFX开发出现的小bug
- IOS中iframe的width自动变宽问题
- hadoop环境移植出现的bug解决
- 【XSY2484】mex 离散化 线段树
- 结构体
- set
- 顺序表
- 设计模式
- 解决使用offsetWidth让DIV自动变宽时出现的小BUG。
- backdoorppt:一个可将载荷伪装成PPT的工具
- mnist svm
- [IOS笔记]懒加载—购物车加载数组和字典
- html超链接
- beyond compare 找不到靠谱“绿色版”怎么办
- Redis内存使用优化与存储
- python argparse 用法总结
- hdu 1217 # 最短路