JavaScript border与offsetWidth

来源：互联网发布：天猫销售数据分析报告编辑：程序博客网时间：2024/05/22 17:30

<style>#div1{    width:200px;    height:200px;    background:#f00;    border:1px solid #000;}</style><script>window.onload = function(){    startMove();}function startMove(){    var oDiv = document.getElementById('div1');    oDiv.style.width = oDiv.offsetWidth - 1 + 'px';</script><div id="div1"></div>

为什么在样式中加了border之后方块会不断变宽而不是变窄？

style.width : width
offsetWidth : style.width + padding + border
随着时间的变化，可以列出这样一个表格：

    style.width        border     offsetWidth①       200              2         202(200+2)②       201(202-1)       2         203(201+2)②       202(203-1)       2         204(202+2)            …………………………………………

可以看出offsetWidth是不断增大的
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。

2.offsetWidth属性仅是可读属性，而style.width是可读写的。

3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。

4.style.width仅能返回以style方式定义的内部样式表的width属性值。

如何获取style行内样式（而不把style写在行内样式里）？
（这问题表达不清楚= =）

function getStyle(obj,attr){    if(obj.currentStyle){       //IE        return obj.currentStyle[attr];    }else{                                  //其他浏览器        return getComputedStyle(obj,false)[attr];    }}

0 0