使用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的面向对象方法以及差别
Mar 31 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
使用javascript做在线算法编程
May 25 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 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网站基础优化方法小结
2008/09/29 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
司机的工作范围及职责
2013/11/13 职场文书
股东协议书范本
2014/04/14 职场文书
合同协议书格式
2014/04/18 职场文书
学习教师法的心得体会
2014/09/03 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
看上去很美观后感
2015/06/10 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
Python jiaba库的使用详解
2021/11/23 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
vue 自定义组件添加原生事件
2022/04/21 Vue.js
Web应用开发TypeScript使用详解
2022/05/25 Javascript
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers