談談jQuery和js裡有關位置和寬高的方法

總結一下jquery、原生js設定和獲取位置、寬高的方法。

position() 方法：只能獲取，不能設定。

可獲取元素相對於其第乙個position值不為static的祖先元素的偏移量，如果沒有，則是相對於文件的偏移量；返回乙個物件，包括兩個屬性:left，top; 屬性值無單位，number型別。具體用法：

$(element).position().left; //獲取元素相對於其第乙個position值不為static的祖先元素的偏移量

offset()方法：既能獲取，也能設定。

獲取和設定元素相對於文件的偏移量。獲取時返回乙個物件，包括兩個屬性：left，top。屬性值無單位，number型別；設定時給方法傳入乙個物件，可包括屬性top,left；具體用法：

$(elemment).offset().left; //獲取元素相對於文件的偏移量
$(element).offset(); //設定元素相對於文件的偏移量

scrollleft()、scrolltop(),滾動方法：既能獲取，也能設定。

可以獲取和設定元素從頂部或者左側已經滾動的值,獲取時返回number型別的數值，設定時給方法傳遞乙個數字引數。具體用法：

$(element).scrollleft(); //獲取元素滾動的left值
$(element).scrollleft(200); //設定元素滾動的left值

width()、height() 方法：既能獲取，也能設定。

可獲取和設定元素的寬度和高度。獲取時，返回number型別；設定時，給方法傳入數值型別的引數即可。具體用法：

$(element).width(); //獲取元素寬度
$(element).width(200); //設定元素寬度

innerwidth()、innerhight()方法：只能獲取，不能設定。

可獲取第乙個匹配元素的內部寬度和高度，例如獲取元素內部寬度時，包括width+padding,不包括border。

outerwidth()、outerhight()方法：只能獲取，不能設定。

可獲取第乙個匹配元素的外部寬度和高度，有兩種情況: （用獲取元素外部寬度來舉例）

1、當方法內部不指定引數或者引數為false時，包括width+padding+margin;

2、當方法內部引數為true時，包括width+padding+border+margin；

css()方法：既可獲取，也可設定。

可以獲取和設定元素的寬高（當然也可獲取和設定其他css屬性，這裡只是為了與其他幾種設定獲取元素寬高的方法做對比），當獲取元素的寬高時，返回乙個單位為px的string字串；當設定元素寬高時，給css()方法傳入物件，物件裡面包含width\height屬性；具體用法：

$(element).css('width'); //獲取元素寬度
$(element).css();//設定元素的寬度和高度，也可以不要引號和單位

offsetleft、offsettop屬性：只可獲取，不可設定（類似jquery的position()方法）。

相對於其第乙個position值不為static的祖先元素來計算偏移量，返回number型別數值。

style.left、style.top:既可設定，也可獲取。

與offsetleft、offsettop屬性相比，共同點：都是相對於其第乙個position值不為static的祖先元素來計算偏移量；不同點：

1、通過style,既可獲取元素寬高，也可設定元素寬高

2、style.left/style.top返回的是字串（包含單位）

3、要獲取style.left/style.top需要事先定義，而且必須定義在html元素的內聯樣式裡，否則獲取到的值將為空。