offsetwidth和style.width的区别是什么

发表于2015-07-12 15:28:28| --次阅读| 来源webkfa| 作者js,javascript

摘要：offsetwidth和style.width的区别是什么:上面两个属性的作用优点类似，都可以返回对象的宽度，但是两者又有很大的区别，下面将通过实例简单介绍一下它们的区别。代码实例: 蚂蚁部落以上代码中，offsetWidth属性可以返回div的宽度，但是style.width并...

offsetwidth和style.width的区别是什么:
上面两个属性的作用优点类似，都可以返回对象的宽度，但是两者又有很大的区别，下面将通过实例简单介绍一下它们的区别。
代码实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51texiao.cn/" /> 
<title>蚂蚁部落</title>
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px; 
  border:5px solid red; 
  background-color:green; 
  padding:3px; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  alert(document.getElementById("mytest").offsetWidth); 
  alert(document.getElementById("mytest").style.width); 
} 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
</body> 
</html>

以上代码中，offsetWidth属性可以返回div的宽度，但是style.width并不能够返回此div的宽度。由运行结果也可以看出offsetWidth返回的宽度值包括:border+width+padding。再来看一段代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51texiao.cn/" /> 
<title>蚂蚁部落</title>
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px; 
  border:5px solid red; 
  background-color:green; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  alert(document.getElementById("mytest").offsetWidth); 
  alert(document.getElementById("mytest").style.width); 
} 
</script> 
</head> 
<body> 
<div id="mytest" style="width:100px;width:100px;border:5px solid red;"></div> 
</body> 
</html>

在上面的代码中，style.width能够获取div的宽度，不过宽度是使用内部样式定义的，并且此宽度就是width定义的宽度，还需要特别主要的一点是，offsetWidth获取的是一个整数值，而style.width获取的是一个字符串，并且带有单位。
再来看一段实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51texiao.cn/" /> 
<title>蚂蚁部落</title>
<style type="text/css"> 
div{ 
  width:100px; 
  height:100px; 
  border:5px solid red; 
  background-color:green; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  document.getElementById("first").offsetWidth=400; 
  document.getElementById("second").style.width="300px"; 
} 
</script> 
</head> 
<body> 
  <div id="first"></div> 
  <div id="second"></div> 
</body> 
</html>

由以上代码可以看出offsetWidth属性仅是可读的，而style.width属性是可读写的。

总结如下:

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

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

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

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