關于網頁的寬&高

sumory 發布于2019-08-29 14:08 / 292人閱讀

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

1. Element.clientHeight和Element.clientWidth

兩者分別返回元素節點 可見部分 的高度和寬度。此“可見部分”包括padding、但不包括border、margin和滾動條。

let rootElement = document.documentElement;

//網頁當前可見高&寬
rootElement.clientHeight
rootElement.clientWidth

2. Element.scrollHeight和Element.scrollWidth

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

let rootElement = document.documentElement;

//網頁總高度
rootElement.scrollHeight
document.body.scrollHeight
document.body.clientHeight

//網頁總寬度
rootElement.scrollWidth
document.body.scrollWidth
document.body.clientWidth

3. Element.scrollLeft和Element.scrollTop

兩者分別表示元素的水平滾動條向右滾動的像素值，以及垂直滾動條向下滾動的像素值。若網頁內沒有滾動條，則其值為 0。

let rootElement = document.documentElement;

//當垂直滾動條滾到最底部時，返回 true
rootElement.scrollHeight - rootElement.scrollTop === rootElement.clientHeight

//當水平滾動條滾到最右側時，返回 true
rootElement.scrollWidth - rootElement.scrollLeft === rootElement.clientWidth

4. Element.offsetHeight和Element.offsetWidth

兩者包括padding、border和滾動條。

let rootElement = document.documentElement;

//網頁總高度
rootElement.offsetHeight
document.body.offsetHeight

//網頁總寬度
rootElement.offsetWidth
document.body.offsetWidth

綜上，獲取網頁高度&寬度的方法有：

let rootElement = document.documentElement;

//由于和的寬度可能設的不一樣，從上取值會更保險一點。

//網頁總高度
rootElement.offsetHeight
rootElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
//網頁總寬度
rootElement.offsetWidth
rootElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth


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

云服務器 GPU云服務器 html限制字的寬 php 獲取圖片的寬 asp獲取屏幕的寬高 asp &amp&amp邏輯

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

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

關于網頁的寬&amp;高

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

Gu_Yan 2019-08-21 18:25 評論0 收藏0
HTML &amp; CSS 之小白再續前緣

摘要：標準文檔流的常見現象空白折疊現象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產生字圍效果。 CSS 盒子模型（點擊查看官方解釋）實際上網頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內到外有以下這幾個元素組成 conten...

Heier 2019-08-29 12:51 評論0 收藏0
HTML &amp; CSS 之小白再續前緣

摘要：標準文檔流的常見現象空白折疊現象。浮動浮動的特點脫離標準文檔流，元素一旦脫離標準文檔流脫標，后面的元素會占據浮動元素原本的位置，而且元素就不再遵守文檔流中塊級元素和行內元素的特性。元素浮動會脫離文檔流但是不會脫離文本流，所以會產生字圍效果。 CSS 盒子模型（點擊查看官方解釋）實際上網頁中的每一個標簽都可以看成一個盒子模型，而這個盒子模型從內到外有以下這幾個元素組成 conten...

taohonghui 2019-08-01 17:04 評論0 收藏0
【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&amp;ClientWidth&am

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

binta 2019-08-29 16:13 評論0 收藏0