offsetwidth与style.width 区别

2018-12-5 23:58| 作者: admin| 查看: 76| 评论: 0|来自: 蚂蚁部落

JavaScript中很多属性的功能比较类似,当然它们之间是有区别的,否则就是设计错误了。

如果是有经验的程序员,从两者名称大体可以猜测到区别,当然这需要一个积累过程。

下面详细介绍一下标题中两属性的区别,期望能够达到举一反三的效果。

offsetwidth与style.width都可以返回表示元素"宽度"的数据。

非常相似,但是区别也是十分明显,下面通过代码实例做一下介绍。

关于两个属性的基本用法参阅如下两篇文章:

(1).JavaScript offsetWidth一章节。

(2).JavaScript style 属性一章节。

一.宽度所涵盖内容的区别:

虽然两者都可以返回表示元素宽度的一个值,但是所涵盖的内容并不相同。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/06/000043n44hzup189fk4sfj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).offsetwidth属性返回值涵盖元素的width+border+padding。

(2).style.width属性返回值仅包含元素的width属性值。

(3).offsetwidth属性返回值是数字,不带单位,style.width返回值带有单位。

二.两个属性的可读写性:

下面不再使用代码演示,直接给出结论。

(1).style.width属性是可读写的。

(2).offsetwidth只读属性,不能赋值,这样很好理解,因为offsetwidth返回值由多种成分构成,无法确定赋值如何在各种成分的划分,这个值给border呢,还是给padding,或者给width。

三.是否能获取隐藏元素的尺寸:

两者在对待隐藏元素是有区别的,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/06/000109ifih4t3t8z4rk3ec.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将div设置为display:none,这时offsetWidth实训个返回值为0,style.width可以正常返回。

四.style.width返回宽度有条件限制:

并不是所有css的width的属性值都可以被style.width属性返回。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/06/000135y7ggpoxx897soqf1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到offsetwidth可以正常返回值,但是style.width没有返回。

但是的的确确使用css设置了元素的width属性值,分析如下:

(1).不要认为style.width属性可以获取任何形式设置的width属性值。

(2).它只能获取通过元素style属性设置width属性值,或者通过style.width设置值的值。

其实从名称也能够猜测出原因,既然是style.xx,那么肯定与style方式设置的CSS属性相关联。

特别说明:不要误以为是与<style></style>内部样式表相关联,而是与style属性方式相关联。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部