使用js解决由border属性引起的div宽度问题
更新时间：2013年11月26日 16:50:42 作者：
由于border属性引起的div宽度问题，确实很让人头疼，在本文将为大家介绍下使用JS是如何解决的，感兴趣的朋友不要错过
下面我们来看一个例程
<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来获取属性。
复制代码 代码如下:
<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来获取属性。
您可能感兴趣的文章:
- jquery和js实现对div的隐藏和显示方法
- js使用removeChild方法动态删除div元素
- js通过八个点 拖动改变div大小的实现方法
- JS控制一个DIV层在指定时间内消失的方法
- js实现可拖动DIV的方法
- ajax局部刷新一个div下jsp内容的方法
- js 为label标签和div标签赋值的方法
- Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
- js innerHTML 改变div内容的方法
- js固定DIV高度,超出部分自动添加滚动条的简单方法
- js循环改变div颜色具体方法
- 解决用jquery load加载页面到div时,不执行页面js的问题
- js解决弹窗问题实现班级跳转DIV示例
- js防止DIV布局滚动时闪动的解决方法
相关文章
JS 通过系统时间限定动态添加 select option的实例代码
这篇文章主要介绍了JS 通过系统时间限定 动态添加 select option的实例代码，非常不错具有参考借鉴价值,需要的朋友可以参考下2016-06-06
ChatGPT 是一个基于深度学习的大型语言模型，处理自然语言需要大量的计算资源和时间，响应速度肯定比普通的读数据库要慢的多，本文介绍了ChatGPT打字机消息回复实现原理，感兴趣的同学可以跟着小编一起学习2023-05-05
javascript制作sql转换为stringBuffer的小工具
这篇文章主要介绍了javascript制作sql转换为stringBuffer的小工具，使用方法很简单，吧写好的sql语句只要格式化好之后放进去就可以了，推荐给大家，有需要的小伙伴可以参考下。2015-04-04
一说到prototype很多人可能第一个想到的是著名的prototype.js框架，当然我们今天说的不是它，而是Javascript中的prototype属性，一般都被翻译为“原型”。这是一个比较特殊的属性，Javascript中的继承一般都依赖这属性实现。2010-08-08
一文详解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中，Map、Set、WeakMap和WeakSet是四个不同的数据结构，它们都有不同的特点和用途，本文详细介绍了Map、Set、WeakMap和WeakSet的用法及区别，需要的朋友可以参考下2023-04-04
JavaScript深度复制（deep clone）的实现方法
本文给大家介绍JavaScript深度复制（deep clone）的实现方法，涉及到js深度复制相关知识，本文介绍的非常详细，特此分享脚本之家平台供大家参考2016-02-02
当前世界上有很多种浏览器，除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器，有时候我们需要判断浏览器与版本方便后续的操作，一句话浏览器的兼容性太差了，缺少标准2014-05-05
this就是你当前要执行的js所抓获的节点，这样在js里就可以不用document.getElement之类的写法来抓获id，name或标签名，具体示例如下2014-03-03
这篇文章主要为大家详细介绍了微信小程序日期时分组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了js对象属性名驼峰式转下划线的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论