欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【使用js解决由border属性引起的div宽度问题】，下面是详细的讲解！
使用js解决由border属性引起的div宽度问题
<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>
关于使用js解决由border属性引起的div宽度问题的用户互动如下：
相关问题：CSS的border属性加上后，为什么会无缘由的增加DIV...
答：DIV所占区域大小（宽度举例）= 宽（width）+内边距(pading)+边框(border大小)+外边距(margin) 所以增加边框自然会增加整个div所占区域了 >>详细
相关问题：js中设置div边框高度
答：设置div边框高度,其实就是设置div的高度,修改css样式可以实现 元素.style.height = '10px';//将高度设为10px 元素.style.width = '20px';//将宽度设为20px; 举个例子: div{ height: 100px; width: 100px; background-color: #3e6bb8; } var mdiv... >>详细
相关问题：div 中的边框border 的宽度会占div的宽度吗？
答：整体宽度=元素宽度(element)+内边距宽度(padding)+边框宽度(border)+外边距宽度(margin) >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 【ExtJs】ExtJs 表单提交登陆实现代码-表单提交-
- 【ajax清除浏览器缓存】Ajax清除浏览器js、css、
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-