代码描述:offsetwidth style.width。offsetwidth与style.width区别
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属性方式相关联。
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能