JS、jQuery各類寬高屬性

JS下各類寬高

---

Window和Document:
JS下寬高分爲掛載在Window對象和Document對象下的寬高屬性，先說下Window和Document的區別:

• Window對象表示瀏覽器中打開的窗口，window對象能夠省略，好比window.alert()能夠簡寫爲alert()

• Document對象是Window對象的一部分，那麼window.document.body咱們能夠寫成document.body，瀏覽器的HTML文檔成爲Document對象

Window下的寬高屬性:

window.innerWidth:瀏覽器窗口內部寬度
window.innerHeight:瀏覽器窗口內部高度
window.outerWidth:瀏覽器窗口外部寬度
window.outerHeight:瀏覽器窗口外部高度
window.screen.width:屏幕寬度
window.screen.height:屏幕高度
window.screen.availWidth:屏幕的可以使用寬度
window.screen.availHeight:屏幕的可以使用高度
window.screenTop:瀏覽器窗口距屏幕頂部的距離
window.screenLeft:瀏覽器窗口距屏幕左側的距離

注:innerWidth、innerHeight和outerWidth、outerHeight是不支持IE9如下版本的，而screen系列寬高則不存在兼容問題
參考圖以下:

Document下的寬高屬性:
Docment下有三類屬性:

• 與client相關的寬高

• 與offset相關的寬高

• 與scroll相關的寬高

與client相關的寬高:

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidth和clientHeight該屬性指的是元素的可視部分寬度和高度，即padding+content

• 若是沒有滾動條，即爲元素設定的高度和寬度

• 若是出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其原本寬高減去滾動條的寬高

clientLeft和clientTop這兩個返回的是元素周圍邊框的厚度，若是不指定一個邊框或者不定位該元素，它的值就是0

clientTop = border-top.border-width
clientLeft = border-left.border-width

獲取瀏覽器窗口可視區域大小在不一樣瀏覽器都實用的JS方案:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

與offset相關寬高介紹:

document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

offsetWidth與offsetHeight這一對屬性指的是元素的border+padding+content的寬度和高度
該屬性和其內部的內容是否超出元素大小無關，只和原本設定的border以及padding和content有關
offsetLeft和offsetTop這兩個屬性是基於offsetParent的，瞭解這兩個屬性咱們必須先了解什麼是offsetParent
若是當前元素的父級元素沒有進行CSS定位（position爲absolute或relative）,offsetParent爲border.
假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素。

• 在IE6/7中：offsetLeft=(offsetParent的padding-left)+(當前元素的margin-left)

• 在IE8/9/10及Chrome中：offsetLeft=(offsetParent的margin-left)+(offsetParent的border寬度)+(offsetParent的padding-left)+(當前元素的margin-left)

• 在FireFox中：offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(當前元素的margin-left)

與scroll相關寬高介紹:

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidth和scrollHeight:

• 給定寬高小於瀏覽器窗口:
  scrollWidth:瀏覽器窗口的寬度

scrollHeight:瀏覽器窗口的高度

• 給定寬高大於瀏覽器窗口，且內容小於給定寬高:
  scrollWidth:給定的寬度+其全部padding、margin、border

scrollHeight:給定的高度+其全部的padding、margin、border

• 給定寬高大於瀏覽器窗口，且內容大於給定寬高:
  scrollWidth:內容寬度+其全部的padding、margin、border

scrollHeight:內容高度+其全部的padding、margin、border

scrollLeft和scrollTop這對屬性是可讀寫的，指的是當元素其中的內容超出其寬高的時候，元素被捲起來的寬度和高度

Event對象的5種座標

clientX和clientY，相對於瀏覽器（可視區左上角0,0）的座標
screenX和screenY，相對於設備屏幕左上角（0,0）的座標
offsetX和offsetY，相對於事件源左上角（0,0）的座標
pageX和pageY，相對於整個網頁左上角（0,0）的座標
X和Y，原本是IE屬性，相對於用CSS動態定位的最內層包容元素

JQuery下各類寬高

---

width():元素的content區域寬度
height():元素的content區域高度
innerWidth():元素的content+padding區域寬度
innerHeight():元素的content+padding區域高度
outerWidth(Boolean):可選，默認表示元素的content+padding+border區域的寬度，若是爲true表示元素的content+padding+border+margin區域的寬度
outerHeight(Boolean):可選，默認表示元素的content+padding+border區域的高度，若是爲true表示元素的content+padding+border+margin區域的高度
scrollLeft():相對於水平滾動條左邊的距離
scrollTop():相對於垂直滾動條上邊的距離
offset():返回相對於document的當前座標值，包含left、top值
position():返回相對於offsetParent的當前座標值，包含left、top值

本文整理自慕課網課程《JS/jQuery寬高的理解和應用》