您所在的位置:小祥子 » 编程 » JavaScript » 正文

offsetwidth和style.width的区别是什么

时间:2015-07-12 编辑:程序员小菜 来源:CnBlogs

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属性值。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0427/222.html

关键词:dt