JavaScript中很多属性的功能比较类似,当然它们之间是有区别的,否则就是设计错误了。
如果是有经验的程序员,从两者名称大体可以猜测到区别,当然这需要一个积累过程。
下面详细介绍一下标题中两属性的区别,期望能够达到举一反三的效果。
offsetwidth与style.width都可以返回表示元素"宽度"的数据。
非常相似,但是区别也是十分明显,下面通过代码实例做一下介绍。
关于两个属性的基本用法参阅如下两篇文章:
一.宽度所涵盖内容的区别:
虽然两者都可以返回表示元素宽度的一个值,但是所涵盖的内容并不相同。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>offsetwidth style.width</title>
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  odiv.innerHTML=str;
} 
</script> 
</head> 
<body> 
<div id="ant" style="width:200px;
                     height:50px; 
                     border:5px solid red; 
                     background-color:green; 
                     padding:3px"></div> 
</body> 
</html>
代码分析如下:
(1).offsetwidth属性返回值涵盖元素的width+border+padding。
(2).style.width属性返回值仅包含元素的width属性值。
(3).offsetwidth属性返回值是数字,不带单位,style.width返回值带有单位。
二.两个属性的可读写性:
下面不再使用代码演示,直接给出结论。
(1).style.width属性是可读写的。
(2).offsetwidth只读属性,不能赋值,这样很好理解,因为offsetwidth返回值由多种成分构成,无法确定赋值如何在各种成分的划分,这个值给border呢,还是给padding,或者给width。
三.是否能获取隐藏元素的尺寸:
两者在对待隐藏元素是有区别的,代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>offsetwidth与style.width区别</title>
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  alert(str);
} 
</script> 
</head> 
<body> 
<div id="ant" style="width:200px;
                     height:50px; 
                     border:5px solid red; 
                     background-color:green; 
                     padding:3px;
                     display:none"></div> 
</body> 
</html>
将div设置为display:none,这时offsetWidth实训个返回值为0,style.width可以正常返回。
四.style.width返回宽度有条件限制:
并不是所有css的width的属性值都可以被style.width属性返回。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>offsetwidth与style.width区别</title>
<style type="text/css"> 
#ant{ 
  width:200px; 
  height:50px; 
  border:5px solid red; 
  background-color:green; 
  padding:3px; 
} 
</style> 
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  odiv.innerHTML=str;
} 
</script> 
</head> 
<body> 
<div id="ant" style=""></div> 
</body> 
</html>
可以看到offsetwidth可以正常返回值,但是style.width没有返回。
但是的的确确使用css设置了元素的width属性值,分析如下:
(1).不要认为style.width属性可以获取任何形式设置的width属性值。
(2).它只能获取通过元素style属性设置width属性值,或者通过style.width设置值的值。
其实从名称也能够猜测出原因,既然是style.xx,那么肯定与style方式设置的CSS属性相关联。
特别说明:不要误以为是与<style></style>内部样式表相关联,而是与style属性方式相关联。

代码描述:offsetwidth style.width,offsetwidth与style.width区别



71 94



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 jshtml对象 javascripthtml对象
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到