标签：
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
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/4639550.html
