使用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 相关文章推荐
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
canvas实现图像放大镜
Feb 06 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
PHP简单日历实现方法
2016/07/20 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
DOM 事件流详解
2015/01/20 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2014年人大工作总结
2014/12/10 职场文书
公务员考察材料
2014/12/23 职场文书