成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS、jQuery各種寬高屬性

CntChen / 1780人閱讀

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

JS下各種寬高

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

Window對象表示瀏覽器中打開的窗口，window對象可以省略，比如window.alert()可以簡寫為alert()

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

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系列寬高則不存在兼容問題
參考圖如下:

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

與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

如果沒有滾動條，即為元素設(shè)定的高度和寬度

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

clientLeft和clientTop這兩個返回的是元素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，它的值就是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這一對屬性指的是元素的border+padding+content的寬度和高度
該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無關(guān)，只和本來設(shè)定的border以及padding和content有關(guān)
offsetLeft和offsetTop這兩個屬性是基于offsetParent的，了解這兩個屬性我們必須先了解什么是offsetParent
如果當(dāng)前元素的父級元素沒有進(jìn)行CSS定位（position為absolute或relative）,offsetParent為border.
假如當(dāng)前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素。

在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這對屬性是可讀寫的，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時候，元素被卷起來的寬度和高度

Event對象的5種坐標(biāo) 
clientX和clientY，相對于瀏覽器（可視區(qū)左上角0,0）的坐標(biāo)
screenX和screenY，相對于設(shè)備屏幕左上角（0,0）的坐標(biāo)
offsetX和offsetY，相對于事件源左上角（0,0）的坐標(biāo)
pageX和pageY，相對于整個網(wǎng)頁左上角（0,0）的坐標(biāo)
X和Y，本來是IE屬性，相對于用CSS動態(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():相對于水平滾動條左邊的距離
scrollTop():相對于垂直滾動條上邊的距離
offset():返回相對于document的當(dāng)前坐標(biāo)值，包含left、top值
position():返回相對于offsetParent的當(dāng)前坐標(biāo)值，包含left、top值

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91226.html

相關(guān)文章

  • JavaScript中的各種寬高屬性

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

    wangbinke 評論0 收藏0

  • 總結(jié)：前端開發(fā)中讓元素水平垂直居中的方法

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

    fnngj 評論0 收藏0

  • 總結(jié)：前端開發(fā)中讓元素水平垂直居中的方法

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

    douzifly 評論0 收藏0

  • 獲取屏幕寬高width(),outerWidth,innerWidth,clientWidth的區(qū)別

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

    woshicixide 評論0 收藏0

  • js監(jiān)聽div元素的寬高變化

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

    lansheng228 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<