JS、jQuery各種寬高屬性

CntChen 發(fā)布于2019-08-22 10:46 / 1768人閱讀

摘要：下各種寬高和下寬高分為掛載在對(duì)象和對(duì)象下的寬高屬性，先說(shuō)下和的區(qū)別對(duì)象表示瀏覽器中打開(kāi)的窗口，對(duì)象可以省略，比如可以簡(jiǎn)寫(xiě)為對(duì)象是對(duì)象的一部分，那么我們可以寫(xiě)成，瀏覽器的文檔成為對(duì)象下的寬高屬性瀏覽器窗口內(nèi)部寬度瀏覽器窗口內(nèi)部高度瀏覽器窗口外

JS下各種寬高

Window和Document:
JS下寬高分為掛載在Window對(duì)象和Document對(duì)象下的寬高屬性，先說(shuō)下Window和Document的區(qū)別:

Window對(duì)象表示瀏覽器中打開(kāi)的窗口，window對(duì)象可以省略，比如window.alert()可以簡(jiǎn)寫(xiě)為alert()

Document對(duì)象是Window對(duì)象的一部分，那么window.document.body我們可以寫(xiě)成document.body，瀏覽器的HTML文檔成為Document對(duì)象

Window下的寬高屬性:

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

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

Document下的寬高屬性:
Docment下有三類(lèi)屬性:

與client相關(guān)的寬高

與offset相關(guān)的寬高

與scroll相關(guān)的寬高

與client相關(guān)的寬高:

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

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

如果沒(méi)有滾動(dòng)條，即為元素設(shè)定的高度和寬度

如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來(lái)寬高減去滾動(dòng)條的寬高

clientLeft和clientTop這兩個(gè)返回的是元素周?chē)吙虻暮穸龋绻恢付ㄒ粋€(gè)邊框或者不定位該元素，它的值就是0

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

獲取瀏覽器窗口可視區(qū)域大小在不同瀏覽器都實(shí)用的JS方案:

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

與offset相關(guān)寬高介紹:

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

offsetWidth與offsetHeight這一對(duì)屬性指的是元素的border+padding+content的寬度和高度
該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無(wú)關(guān)，只和本來(lái)設(shè)定的border以及padding和content有關(guān)
offsetLeft和offsetTop這兩個(gè)屬性是基于offsetParent的，了解這兩個(gè)屬性我們必須先了解什么是offsetParent
如果當(dāng)前元素的父級(jí)元素沒(méi)有進(jìn)行CSS定位（position為absolute或relative）,offsetParent為border.
假如當(dāng)前元素的父級(jí)元素中有CSS定位，offsetParent取最近的那個(gè)父級(jí)元素。

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

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

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

與scroll相關(guān)寬高介紹:

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

scrollWidth和scrollHeight:

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

scrollHeight:瀏覽器窗口的高度

給定寬高大于瀏覽器窗口，且內(nèi)容小于給定寬高:
scrollWidth:給定的寬度+其所有padding、margin、border

scrollHeight:給定的高度+其所有的padding、margin、border

給定寬高大于瀏覽器窗口，且內(nèi)容大于給定寬高:
scrollWidth:內(nèi)容寬度+其所有的padding、margin、border

scrollHeight:內(nèi)容高度+其所有的padding、margin、border

scrollLeft和scrollTop這對(duì)屬性是可讀寫(xiě)的，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候，元素被卷起來(lái)的寬度和高度

Event對(duì)象的5種坐標(biāo)

clientX和clientY，相對(duì)于瀏覽器（可視區(qū)左上角0,0）的坐標(biāo)
screenX和screenY，相對(duì)于設(shè)備屏幕左上角（0,0）的坐標(biāo)
offsetX和offsetY，相對(duì)于事件源左上角（0,0）的坐標(biāo)
pageX和pageY，相對(duì)于整個(gè)網(wǎng)頁(yè)左上角（0,0）的坐標(biāo)
X和Y，本來(lái)是IE屬性，相對(duì)于用CSS動(dòng)態(tài)定位的最內(nèi)層包容元素

JQuery下各種寬高

width():元素的content區(qū)域?qū)挾?height():元素的content區(qū)域高度
innerWidth():元素的content+padding區(qū)域?qū)挾?innerHeight():元素的content+padding區(qū)域高度
outerWidth(Boolean):可選，默認(rèn)表示元素的content+padding+border區(qū)域的寬度，如果為true表示元素的content+padding+border+margin區(qū)域的寬度
outerHeight(Boolean):可選，默認(rèn)表示元素的content+padding+border區(qū)域的高度，如果為true表示元素的content+padding+border+margin區(qū)域的高度
scrollLeft():相對(duì)于水平滾動(dòng)條左邊的距離
scrollTop():相對(duì)于垂直滾動(dòng)條上邊的距離
offset():返回相對(duì)于document的當(dāng)前坐標(biāo)值，包含left、top值
position():返回相對(duì)于offsetParent的當(dāng)前坐標(biāo)值，包含left、top值

本文整理自慕課網(wǎng)課程《JS/jQuery寬高的理解和應(yīng)用》