最近的分析都是有點不溫不火，基本都是基礎的回顧了
今年部落格的目标目前總的來說有2大塊
JS版的設計模式，會用jQuery來诠釋
JS版的資料結構，最近也一直在狠狠的學習中.
HTML息息相關的的樣式
<a></a>
offsetWidth offsetHeight offsetLeft offsetTop
offsetHeight/offsetWidth: 表述元素的外尺寸：元素内容+内邊距+邊框(不包括外邊距)
offsetLeft/offsetTop: 表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent對象）左上角的距離。
offsetParent元素是指元素最近的定位（relative,absolute）祖先元素,可遞歸上溯。
clientWidth clientHeight
clientWidth/clientHeight: 用于描述元素的内尺寸：元素内容+兩邊内邊距
scrollWidth scrollHeight scrollLeft scrollTop
scrollHeight/scrollWidth: 元素内容的總高度或寬度
scrollLeft/scrollTop：是指元素滾動條位置，它們是可寫的(被隐藏的内容區域左側/上方的像素)
浏覽器視窗的滾動條位置：window對象的pageXoffset和pageYoffset, IE 8及更早版本可以通過scrollLeft和scrollTop屬性獲得滾動條位置
以下是網上的總結，我收集下
Chrome/FF/Safari/opera
對這些浏覽器而言，window有個屬性innerWidth/innerHeight包含的是整個文檔的可視區域尺寸，注意，這個尺寸是包含滾動條大小的。
如果我們不計滾動條的影響，就可以直接使用這兩個屬性。
如果滾動條會影響（比如最大化彈出框），那麼應該想另外的辦法。
document.documentElementy與document.body
Document對象是每個DOM樹的根，但是它并不代表樹中的一個HTML元素，document.documentElement屬性引用了作為文檔根元素的html标記，document.body屬性引用了body标記
我們這裡擷取常見的三個值（scrollWidth、offsetWidth和clientwidth）來比較一下
不過一般來說，我們不會給document.documentElement來設定邊框，是以這裡的clientwidth 與 offsetWidth一緻
document.body.scrollWidth傳回body的寬度
注意，這裡的scrollWidth有個不一緻的地方，基于webkit的浏覽器（chrome和safari）傳回的是整個文檔的寬度，也就是和document.documentElement.scrollWidth一緻，
opera和FF傳回的就是标準的body 的scrollWidth，個人覺得opera和FF算是比較合理的。
document.body.offsetWidth傳回body的offsetWidth
document.body.clientwidth傳回body的clientwidth（不包含邊框），clientwidth = offsetWidth - borderWidth
我們看上面的例子，會發現
body和documentElement的有些值是相等的，這并不是表示他們是等同的。而是因為當我們沒有給body設定寬度的時候，document.body預設占滿整個視窗寬度，
于是就有：
當我們給body設定了一個寬度的時候，差別就出來了。
IE9/IE8
這兩個差不多，唯一的差別是IE9包含window.innerWidth屬性，而IE8不包含window.innerWidth屬性。
document.documentElement.scrollWidth傳回整個文檔的寬度，和FF等浏覽器一緻
document.documentElement.offsetWidth傳回整個文檔的可見寬度（包含滾動條，值和innerWidth一緻），注意，這裡和FF等浏覽器又有點差別。
document.documentElement.clientwidth傳回整個文檔的可見寬度（不包含邊框），和FF等浏覽器一緻。clientwidth = offsetWidth - 滾動條寬度
document.body.scrollWidth傳回body的寬度，注意，這裡的scrollWidth和FF等浏覽器有點差別，這裡并不包括body本身的border寬度。
是以例子中，相比FF少了10px。
document.body.offsetWidth傳回body的offsetWidth，和FF等浏覽器一緻
document.body.clientwidth傳回body的clientwidth（不包含邊框），和FF等浏覽器一緻，clientwidth = offsetWidth – borderWidth
IE7與IE9/IE8的主要差別是
第一、document.documentElement.offsetWidth的傳回值不一樣，
參見上面說的，IE9/IE8的document.documentElement.offsetWidth包含滾動條，但是，IE7的document.documentElement.offsetWidth不包含滾動條。
第二、document.documentElement.scrollWidth傳回整個文檔的寬度，注意，這裡和IE9/IE8、FF等浏覽器又有不一緻，對于IE9/IE8、FF等浏覽器，scrollWidth最小不會小于視窗的寬度，但是在IE下沒有這個限制，文檔有多小，這個就有多小
其他倒是挺一緻的。
IE6了
IE6的document.documentElement傳回值與IE9/IE8沒有差別（由此可見，對于document.documentElement，IE7就是個奇葩）。
話說回來，IE的document.body就是個奇葩，當沒有給body設定寬度的時候，body是預設占滿整個文檔的（注意，其他的浏覽器都是占滿整個視窗），當然，最小值是整個視窗的大小，就是說body指向了根元素。
是以，在算上IE6在解析width方面的bug，和其他的浏覽器的差別就淋漓盡緻了。
document.body.scrollWidth傳回body的寬度，和IE9/IE8/IE7一緻
document.body.offsetWidth傳回body的offsetWidth，注意，由于body的不同，這裡的offsetWidth = scrollWidth + borderWidth
document.body.clientwidth傳回body的clientwidth（不包含邊框）clientwidth = offsetWidth - borderWidth
另外，有一點和IE7同樣，就是document.documentElement.scrollWidth沒有最小寬度限制。
先看jQuery對視窗大小六種相似方法的生成
//執行代碼
擴充方法還是用的合并的模式，把具有相同特性的方法采用合并處理
循環生成是藝術，需要深刻了解它們的功能與共同點，然後将特異點組成一個對象，好處自然是省代碼了，然後可以集中處理
例如：.width()
為比對的元素集合中擷取第一個元素的目前計算寬度值。
A.首先先解釋下普通元素和非普通元素，
非普通元素是指window，document這些 元素對象，
普通元素是指除window，document之外的元素，如：div
B.css(width) 和 .width()之間的差別？
對于非普通元素，隻能使用 .width()
對于普通的元素 ，他們的作用相同
後者傳回一個沒有機關的數值（例如，<code>400</code>），前者是傳回帶有完整機關的字元串（例如，<code>400px</code>）。當一個元素的寬度需要數學計算的時候推薦使用<code>.width()</code> 方法
C.非普通元素的擷取
如：window
取最大值，因為可以帶卷滾條溢出
D.普通元素取值
因為有些樣式不是簡單的讀寫屬性就可以的，比如width就不是簡單地讀取el.style.width。為了解決這個問題，jquery定義了一個屬性 $.cssHooks，這裡可以自定義對某個屬性的get和set操作。而且jquery中就是用cssHooks來處理某些特殊屬性的
對CSS的操作都是通過統一的API調用，操作的屬性是
borderWidth: Object
height: Object
margin: Object
opacity: Object
padding: Object
width: Object
此時就會用jQuery.cssHooks方法處理相容問題，
width,height的鈎子方法
get 方法：
1 節點隐藏等情況下，height、width等擷取值不準，此時需利用jQuery.swap方法來獲得準确值
2 getWidthOrHeight擷取準确值
本章大體回顧下了跟HTML相關處理的10種方法與jQuery中相對應的處理流，下章再具體分析jQuery中對應每種不同相容的處理
本文轉自艾倫 Aaron部落格園部落格，原文連結：http://www.cnblogs.com/aaronjs/p/3565253.html，如需轉載請自行聯系原作者