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
时间： 2024-08-05 23:39:50