使用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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
js动态引入的四种方法
May 05 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
js实现左右轮播图
Jan 09 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
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+APACHE实现网址伪静态
2015/02/22 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php数组和链表的区别总结
2019/09/20 PHP
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
css3的transition属性详解
2014/12/15 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
业务经理岗位职责
2013/11/11 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
大学旷课检讨书
2014/01/28 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
出差报告格式模板
2014/11/06 职场文书
2014年质量工作总结
2014/11/22 职场文书
工伤私了协议书范本
2014/11/24 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript