js和jQuery獲取視窗和元素尺寸簡單介紹

當然jQuery是由js實現的，但是畢竟從外觀上和使用上有所不同。

下面就分別介紹一下如何使用原生js和jQuery獲取視窗和元素的尺寸。

一.原生js獲取瀏覽器客戶區的尺寸:

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.clientWidth //獲取瀏覽器客戶區的寬度 
document.documentElement.clientHeight //獲取瀏覽器客戶區的高度

二.原生js獲取body的尺寸:

[JavaScript] 純文字檢視 複製程式碼
document.body.clientWidth//body物件寬度 
document.body.clientHeight//body物件高度

關於clientWidth屬性可以參閱clientWidth屬性用法詳解一章節。

三.jQuery獲取瀏覽器客戶區的尺寸:

[JavaScript] 純文字檢視 複製程式碼
$(window).width()//瀏覽器可見區域寬度
$(window).height()//瀏覽器可見區域高度

四.jQuery獲取頁面文件或者body的高度:

[JavaScript] 純文字檢視 複製程式碼
$(document).height()//頁面文件的高度
$(document.body).height()//body物件高度

五.原生js獲取元素的尺寸:

[JavaScript] 純文字檢視 複製程式碼
obj.width=obj.style.width//通過style定義的元素width屬性值
obj.clientWidth//width + padding的尺寸
obj.offsetHeight//height + padding + border的尺寸

六.jQuery獲取元素的尺寸:

[JavaScript] 純文字檢視 複製程式碼
obj.innerWidth()//獲得包括內邊界（padding）的元素寬度。
obj.outerWidth()//獲得包括內邊界(padding)和邊框(border)的元素寬度。
obj.outerWidth(true)//獲得包括外邊界(margin)的元素寬度。