JavaScript中很多属性的功能比较类似，当然它们之间是有区别的，否则就是设计错误了。
如果是有经验的程序员，从两者名称大体可以猜测到区别，当然这需要一个积累过程。
下面详细介绍一下标题中两属性的区别，期望能够达到举一反三的效果。
offsetwidth与style.width都可以返回表示元素”宽度”的数据。
非常相似，但是区别也是十分明显，下面通过代码实例做一下介绍。
关于两个属性的基本用法参阅如下两篇文章：
一.宽度所涵盖内容的区别：
虽然两者都可以返回表示元素宽度的一个值，但是所涵盖的内容并不相同。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.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.cxvn.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.cxvn.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属性方式相关联。
1.《offsetwidth与style.width区别》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《offsetwidth与style.width区别》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/265.html