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

資訊專欄INFORMATION COLUMN

關(guān)于網(wǎng)頁的寬&高

sumory / 307人閱讀

摘要：網(wǎng)頁當(dāng)前可見高寬和兩者分別返回網(wǎng)頁元素的總高度總寬度。網(wǎng)頁總高度網(wǎng)頁總寬度和兩者分別表示元素的水平滾動(dòng)條向右滾動(dòng)的像素值，以及垂直滾動(dòng)條向下滾動(dòng)的像素值。若網(wǎng)頁內(nèi)沒有滾動(dòng)條，則其值為。

1. Element.clientHeight和Element.clientWidth

兩者分別返回元素節(jié)點(diǎn) 可見部分 的高度和寬度。此“可見部分”包括padding、但不包括border、margin和滾動(dòng)條。

let rootElement = document.documentElement;

//網(wǎng)頁當(dāng)前可見高&寬
rootElement.clientHeight
rootElement.clientWidth
2. Element.scrollHeight和Element.scrollWidth

兩者分別返回網(wǎng)頁元素的總高度 & 總寬度。其包括padding，但不包括border、margin和滾動(dòng)條。

let rootElement = document.documentElement;

//網(wǎng)頁總高度
rootElement.scrollHeight
document.body.scrollHeight
document.body.clientHeight

//網(wǎng)頁總寬度
rootElement.scrollWidth
document.body.scrollWidth
document.body.clientWidth
3. Element.scrollLeft和Element.scrollTop

兩者分別表示元素的水平滾動(dòng)條向右滾動(dòng)的像素值，以及垂直滾動(dòng)條向下滾動(dòng)的像素值。若網(wǎng)頁內(nèi)沒有滾動(dòng)條，則其值為 0。

let rootElement = document.documentElement;

//當(dāng)垂直滾動(dòng)條滾到最底部時(shí)，返回 true
rootElement.scrollHeight - rootElement.scrollTop === rootElement.clientHeight

//當(dāng)水平滾動(dòng)條滾到最右側(cè)時(shí)，返回 true
rootElement.scrollWidth - rootElement.scrollLeft === rootElement.clientWidth
4. Element.offsetHeight和Element.offsetWidth

兩者包括padding、border和滾動(dòng)條。

let rootElement = document.documentElement;

//網(wǎng)頁總高度
rootElement.offsetHeight
document.body.offsetHeight

//網(wǎng)頁總寬度
rootElement.offsetWidth
document.body.offsetWidth
綜上，獲取網(wǎng)頁高度&寬度的方法有： 
let rootElement = document.documentElement;

//由于和的寬度可能設(shè)的不一樣，從上取值會(huì)更保險(xiǎn)一點(diǎn)。

//網(wǎng)頁總高度
rootElement.offsetHeight
rootElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
//網(wǎng)頁總寬度
rootElement.offsetWidth
rootElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth


//可見部分高度
window.innerHeight             //包括滾動(dòng)條
rootElement.clientHeight       //不包括滾動(dòng)條
//可見部分寬度
window.innerWidth              //包括滾動(dòng)條
rootElement.clientWidth        //不包括滾動(dòng)條

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

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

相關(guān)文章

  • 關(guān)于網(wǎng)頁的寬&高

    摘要：網(wǎng)頁當(dāng)前可見高寬和兩者分別返回網(wǎng)頁元素的總高度總寬度。網(wǎng)頁總高度網(wǎng)頁總寬度和兩者分別表示元素的水平滾動(dòng)條向右滾動(dòng)的像素值，以及垂直滾動(dòng)條向下滾動(dòng)的像素值。若網(wǎng)頁內(nèi)沒有滾動(dòng)條，則其值為。 1. Element.clientHeight和Element.clientWidth 兩者分別返回元素節(jié)點(diǎn) 可見部分 的高度和寬度。此可見部分包括padding、但不包括border、margin和...

    Gu_Yan 評論0 收藏0

  • HTML & CSS 之小白再續(xù)前緣

    摘要：標(biāo)準(zhǔn)文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動(dòng)浮動(dòng)的特點(diǎn)脫離標(biāo)準(zhǔn)文檔流，元素一旦脫離標(biāo)準(zhǔn)文檔流脫標(biāo)，后面的元素會(huì)占據(jù)浮動(dòng)元素原本的位置，而且元素就不再遵守文檔流中塊級(jí)元素和行內(nèi)元素的特性。元素浮動(dòng)會(huì)脫離文檔流但是不會(huì)脫離文本流，所以會(huì)產(chǎn)生字圍效果。 CSS 盒子模型 （點(diǎn)擊查看官方解釋） 實(shí)際上網(wǎng)頁中的每一個(gè)標(biāo)簽都可以看成一個(gè)盒子模型，而這個(gè)盒子模型從內(nèi)到外有以下這幾個(gè)元素組成 conten...

    Heier 評論0 收藏0

  • HTML & CSS 之小白再續(xù)前緣

    摘要：標(biāo)準(zhǔn)文檔流的常見現(xiàn)象空白折疊現(xiàn)象。浮動(dòng)浮動(dòng)的特點(diǎn)脫離標(biāo)準(zhǔn)文檔流，元素一旦脫離標(biāo)準(zhǔn)文檔流脫標(biāo)，后面的元素會(huì)占據(jù)浮動(dòng)元素原本的位置，而且元素就不再遵守文檔流中塊級(jí)元素和行內(nèi)元素的特性。元素浮動(dòng)會(huì)脫離文檔流但是不會(huì)脫離文本流，所以會(huì)產(chǎn)生字圍效果。 CSS 盒子模型 （點(diǎn)擊查看官方解釋） 實(shí)際上網(wǎng)頁中的每一個(gè)標(biāo)簽都可以看成一個(gè)盒子模型，而這個(gè)盒子模型從內(nèi)到外有以下這幾個(gè)元素組成 conten...

    taohonghui 評論0 收藏0

  • 【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

    摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時(shí)...

    binta 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<