使用js解决由border属性引起的div宽度问题


Posted in Javascript onNovember 26, 2013

下面我们来看一个例程

<script type="text/javascript"> 
var timer 
function stopMove(){ 
clearInterval(timer) 
} 
function startMove(){ 
var div=document.getElementById('ok') 
clearInterval(timer) 
timer=setInterval(function(){ 
ok.style.width=ok.offsetWidth-1+'px' ;//理论上应该是宽度不断减少,但是实际却增长,原因在样式表中的border属性,去掉即可解决 
},20) 
} 
</script> 
<style type="text/css"> 
* {margin: 0;padding:0} 
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;} 
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px red solid; } 
</style> 
</head> 
<body> 
<div id="ok"></div>

注意看注释,为什么会出现这个现象呢?其实就是由于border引起的,由于ok.style.width指定的是div的宽度,而offsetwidth指的是实际的宽度,包括border宽度。所以这个右边的式子得到的宽度值其实比左边大一个像素,解决办法,每次减去3个像素就可以达到实际减去一个像素的目的。或者用右边也用parseInt(div.style.width),但要修改div如下:
<div id="ok" style="width:200px:></div>

终极方案:用currentstyle或getcomputedstyle来获取属性。
Javascript 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
js实现select下拉框选择
Jan 11 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
js 弹出框只弹一次(二次修改之后的)
Nov 26 #Javascript
JS匀速运动演示示例代码
Nov 26 #Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 #Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 #Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 #Javascript
JS判断不能为空实例代码
Nov 26 #Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 #Javascript
You might like
php中访问修饰符的知识点总结
2019/01/27 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JavaScript 大数据相加的问题
2011/08/03 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
jquery密码强度校验
2015/12/02 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在双python下设置python3为默认的方法
2018/10/31 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
英国高街电视:High Street TV
2018/05/22 全球购物
职专应届生求职信
2013/11/16 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
生产操作工岗位职责
2014/09/16 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
廉政承诺书范文
2015/04/28 职场文书
监守自盗观后感
2015/06/10 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
党员反邪教心得体会
2016/01/15 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python