有效解决js中添加border后动画bug问题
2016-04-17 14:14
357 查看
原文链接:http://www.cnblogs.com/Arther-J/p/5400971.html
做了个demo发现如果一个div不加border属性,用对象的offsetWidth属性来控制width没问题,但是如果一旦加了border属性,问题就来了。
其实offsetWidth属性获取的的是div内容宽度加内外边距和边框的宽度总和,所以为了更好地解决这个bug,自己弄了一个getStyle方法来有效的解决这个bug。以下是代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <style type="text/css"> div{width: 200px;height: 200px;background: red;border: 2px solid blue;} </style> <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementsByTagName("div")[0]; startMove(); function startMove() { setInterval(function() { oDiv.style.width = parseInt(getStyle(oDiv,"width"))-1+"px"; },30); } function getStyle(obj,attr) { if (obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } } </script> <body> <div></div> </body> </html>
转载于:https://www.cnblogs.com/Arther-J/p/5400971.html
相关文章推荐
- 【iOS-Cocos2d游戏开发之七】在cocos2d中添加/删除系统组件,并解决View设置透明会影响View中的其他组件的问题!【11月28日更新解决添加组件Cocos2d动画停止播放的BUG】
- 【iOS-Cocos2d游戏开发之七】在cocos2d中添加/删除系统组件,并解决View设置透明会影响View中的其他组件的问题!【11月28日更新解决添加组件Cocos2d动画停止播放的BUG】
- 【iOS-Cocos2d游戏开发之七】在cocos2d中添加/删除系统组件,并解决View设置透明会影响View中的其他组件的问题!更新解决添加组件Cocos2d动画停止播放的BUG】
- 使用js解决由border属性引起的div宽度问题
- 一个页面使用两次timepicker.js引起的Maximum call stack size exceeded问题解决办法及bug修复
- cocosbuilder3.0 bug修正:解决在帧上添加音效预览时经常没声音的问题
- 【09】vue.js — 解决添加重复数据报错问题
- 解决js赋值时需要添加alert方法赋值才成功否则赋值语句不执行问题
- 通过添加user-extension.js解决selenium-IDE中的回车和blank问题
- 原生js解决对象事件处理程序添加和删除的兼容性问题
- Easyui添加tab时以href形式载入页面 未执行js脚本问题解决
- 用JS有效解决移动web浏览器中HTML元素的overflow:scroll滚动属性失效问题
- 同时添加删除动画时bug的解决
- JS解决IOS中拍照图片预览旋转90度BUG的问题
- 利用事件委托解决js元素添加后未响应绑定事件问题
- 解决js,webservice 跨域问题的,服务器端添加代码
- FCKEditor fckconfig.js配置,添加字体和大小 附:中文字体乱码问题解决
- js设置,删除,添加cookie,同时解决在目录下,不能设置、删除和添加的问题
- html引入的js css文件添加随机数 , 保证每次都获取最新的文件 ,可解决浏览器缓存问题
- 使用js解决由border属性引起的div宽度问题