js选取元素的宽（高）度

我们所知道的获取元素的宽高有两种办法：

1、

var obj = document.getElementById('div1');
var width = obj.style.width;//获取该元素的宽度

2、

var obj = document.getElementById('div1');
var width = obj.offsetWidth;//获取该元素的宽度

但是这两种在一定程度上还是有差别的。

当一个元素的宽高都写在样式表中（独立的css文件中）时，要用第二种。offsetWidth

当元素的宽高写在标签中（通过style=“”来写的）时，两种都可以。offsetWidth和style.width

同理，获取高度也是如此。

下面我们来测试一下为什么写在css文件里的left、top获取不到：

我们在css文件里定义这个div的属性：

#div1
{
position:absolute;
width:100px;
height:100px;
border:1px solid black;
background-color:red;
left:10px;
}

我们定义了这个div为绝对定位，然后左边距离浏览器左边为10px。

现在我们来用js获取一下：

<pre name="code" class="javascript">var oDiv = document.getElementById('div1');
console.log(oDiv.style.left);
console.log(typeof(oDiv.style.left));

我们通过向控制台输出这个div的style.left和style.left的变量类型。

可以看到控制台输出的结果为：

可以看出，这样输出的oDiv.style.left的值为空，什么也没有输出，类型是string。

下面，我们再来输出一下offsetLeft看看其值和类型是什么。

var oDiv = document.getElementById('div1');
console.log(oDiv.offsetLeft);
console.log(typeof(oDiv.offsetLeft));

这时候就有输出了，而且类型是一个number类型，这样以后再进行位置的变换的时候更方便进行直接加减。

当把div的left属性设置在标签中时：

<div id="div1" style="left:10px"></div>

这时，再通过上面两种输出来测试可以发现，（我就不一步一步来了，这个交给你们感兴趣的测试一下把）

当我们用oDiv.style.left来进行输出时。

输出的是10px

类型是string

这时该值不再是空的了，而是10px。

用offsetLeft输出时，输出的依然是

值：10

类型：number