JS、jQuery各種寬高屬性

CntChen 發布于2019-08-22 10:46 / 1777人閱讀

摘要：下各種寬高和下寬高分為掛載在對象和對象下的寬高屬性，先說下和的區別對象表示瀏覽器中打開的窗口，對象可以省略，比如可以簡寫為對象是對象的一部分，那么我們可以寫成，瀏覽器的文檔成為對象下的寬高屬性瀏覽器窗口內部寬度瀏覽器窗口內部高度瀏覽器窗口外

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寬高的理解和應用》

云服務器 GPU云服務器 js獲取圖寬高 jquery修改屬性值 js獲取移動設備寬高 jquery設置disabled屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91226.html

JavaScript中的各種寬高屬性

摘要：在中，存在著多的關于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當前顯示文檔的。如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。在js中，存在著N多的關于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 評論0 收藏0
總結：前端開發中讓元素水平垂直居中的方法

摘要：如果要居中的塊級元素直接是內聯元素等，直接在其父級元素上加上屬性即可圖片之間，瀏覽器會產生默認的間距，父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素，如果是內聯元素，需要添加屬性而且元素不浮動。前端開發中，我們經常需要對元素進行水平垂直居中。為此，小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 評論0 收藏0
獲取屏幕寬高width(),outerWidth,innerWidth,clientWidth的區別

摘要：基本介紹與與獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。縱向滾動條寬度橫向滾動條高度與與獲得的是加上工具條與滾動條窗口的寬度與高度。兼容性和屬性與和屬性以及以下不支持。基本介紹 $(window).width()與$(window).height() $(window).width()與$(window).height()：獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。 $...

woshicixide 2019-08-21 12:02 評論0 收藏0
js監聽div元素的寬高變化

摘要：構造函數，參數為回調函數構造函數為，它在監聽到中的改變并且一系列改變結束后觸發回調函數。是要監聽的元素，為監聽選項對象，可選的選項如下所以監聽元素寬高變化，就是監聽屬性變化這樣當元素發生變化時，就會觸發構造函數中的函數。一、js監聽window變化的方法 1、onsize只能監聽window對象的變化 (1)、 window對象原生、jQuery方法 //原生寫法 window.on...

lansheng228 2019-08-23 18:21 評論0 收藏0