題中的那麼多屬性讓人頭都大了，他們到底是什麼意思？不同瀏覽器的實現是一樣的嗎？以下所有結論來自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2，操作系統ubuntu16.04的測試，關於IE及其它瀏覽器並沒有考慮。 ...
題中的那麼多屬性讓人頭都大了，他們到底是什麼意思？不同瀏覽器的實現是一樣的嗎？以下所有結論來自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2，操作系統ubuntu16.04的測試，關於IE及其它瀏覽器並沒有考慮。
一、談談XXWidth
1、width
這個是style對象的一個屬性，跟你在css樣式里寫的那個width的值是一樣的，註意他是帶單位的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1</title> <style type="text/css"> div{ width: 100px; height: 100px; border: 20px; margin: 20px; padding: 20px; background: red; } </style> </head> <body> <div id="div"></div> <script type="text/javascript"> var link = document.getElementsByTagName("style")[0]; var sheet = link.sheet||link.styleSheet; var rules = sheet.rules || sheet.cssRules; console.log(rules[0].style.width); </script> </body> </html>
上述例子中結果都是 100px，當然chrome和firefox在獲取CSSStyleSheet對象和cssRules對象上還有區別，chorme由sheet和rules得到，firefox由styleSheet 和cssRules得到。
2、clientWidth
這個值表示的是可用區域的寬度，測試沒有豎向滾動條時兩個瀏覽器對這個屬性保持一致，有滾動條時，chrome認為滾動條是15px，ff認為是10px;而且通過document.body.clientWidth 得到的值和通過document.documentElement.clientWidth得到的值不同，前者等於css的width+左右padding，後者仍然是可用區的寬。有人將這個屬性交可視區寬，本人認為不對，可以理解成可用區寬。自行體會，註意padding也是可用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clientWidth</title> <style type="text/css"> body{ margin: 0; padding: 20px; width: 5000px; /* height: 10000000px; */ } </style> </head> <body> <script type="text/javascript"> console.log(document.documentElement.clientWidth); </script> </body> </html>
我測試結果兩個都是1319（你的測試可能不一樣，瀏覽器的寬度不一樣）;
如果出現豎向滾動條（去掉height註釋），chrome值為1304,firefox值為1309。
如果用body代替上述的documentElement則，結果為5040. 如果設置box-sizing:border-box則值為5000.此處可以用標準盒子模型解釋。
3、offsetWidth
表示一個對象的實際寬度。
<!DOCTYPE html> <html> <head> <title>offsetWidth</title> <style type="text/css"> div{ width: 100px; height: 100px; margin: 10px; padding: 13px; background: red; } </style> </head> <body> <div></div> <script type="text/javascript"> var div = document.getElementsByTagName("div")[0]; console.log(div.offsetWidth); </script> </body> </html>
得到值為126，加上box-sizing: border-box;為100
看看有滾動條的情況
<!DOCTYPE html> <html> <head> <title>offsetWidth</title> <style type="text/css"> .outer{ width: 100px; height: 100px; margin: 10px; padding: 13px; background: red; box-sizing: border-box; overflow: scroll; } .inner{ width: 1000px; height: 1000px; } </style> </head> <body> <div class="outer"> <div class="inner" id="inner"></div> </div> <script type="text/javascript"> var div = document.getElementById("inner"); console.log(div.offsetWidth); </script> </body> </html>
發現仍然是表示真實寬度。
4、scrollWidth
表示的是對象真實寬度，這個和offsetWidth有什麼區別呢，我得測試測試。沒區別嗎？我將上面的offsetWidth換成scrollWidth後發現還是1000啊！在測試，要是一樣搞兩個幹嘛呢，一定有區別的。
<!DOCTYPE html> <html> <head> <title>scrollWidth</title> <style type="text/css"> .outer{ width: 100px; height: 100px; margin: 10px; padding: 13px; background: red; box-sizing: border-box; overflow: scroll; } .inner{ width: 1000px; height: 1000px; border: 13px solid red; padding: 12px; margin:4px; } </style> </head> <body> <div class="outer"> <div class="inner" id="inner"></div> </div> <script type="text/javascript"> var div = document.getElementById("inner"); console.log(div.scrollWidth); </script> </body> </html>
一不做，二不修，border，margin，padding全上。發現offsetWidth為1050,說明它算了padding和borer，而scrollWidth為1024,只算了padding沒算border。
哦！我知道了，原來offsetWidth算邊寬，而scrollWidth不算邊寬啊。
二、談談XXtop
上面談得是與大小相關的，下麵談與位置相關的。
1、top
這個是style的屬性，沒有定義返回“”，定義在link或者style中的拿不到。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>top</title> <style type="text/css"> </style> </head> <body> <div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div> </body> <script type="text/javascript"> var div = document.getElementById("div"); console.log(div.style.top); </script> </html>
返回20px，帶單位。
2、offsetTop
他更top差不多，但是是返回的數字，而且一定有值。就是這樣
結果我測試了一下，發現不對啊，就是上面的那個例子，我直接改了個offsetTop，你猜怎麼著，結果是28不是20,然後我給了一個body{margin:0;}, 然後就是20了，你說奇怪不奇怪。我的理解是。因為上面是position：relative;是相對自己定位的，所以它本來的上邊距離外面那個寬有8px，8px是body的margin引起的。而offsetTop考慮了這個8,是從父元素的最最外邊算得，不是border那裡。
3、scrollTop
表示的是被捲去的高度。比如下麵就是0,因為獲取的時候還沒捲。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>top</title> <style type="text/css"> body{ margin: 10px; height: 1000000000000px; } </style> </head> <body> <div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div> </body> <script type="text/javascript"> var b = document.body; console.log(b.scrollTop); </script> </html>
三、關於xxheight和xxleft，offsetParent
xxheight和xxleft跟上面的差不多，對比一下就知道了。offsetParent和parentNode是有區別的，看這裡：http://blog.csdn.net/u012552049/article/details/45390181，offset相對於誰偏移，相對於誰就是offsetParent，這個元素一般來說是用了定位的元素。
參考：
- http://www.cnblogs.com/kongxianghai/p/4192032.html
- http://blog.csdn.net/woxueliuyun/article/details/8638427
- http://wenku.it168.com/d_000647093.shtml
