淺談一下window窗口的各種寬高屬性

renweihub 發(fā)布于2019-08-01 16:50 / 2804人閱讀

摘要：一常用的寬高屬性在日常開發(fā)的時(shí)候，我們常常需要用到這幾個(gè)高度信息。二各類寬高說(shuō)明下的寬高屬性最常見的就是了。這個(gè)屬性表示的是瀏覽器正文可見區(qū)域的高度和寬度。通常情況下所有，下列語(yǔ)句可以判斷一個(gè)滾動(dòng)容器是否滾動(dòng)容器底部

一常用的寬高屬性

在日常開發(fā)的時(shí)候，我們常常需要用到這幾個(gè)高度信息。瀏覽器的視口高度和寬度，瀏覽器的卷動(dòng)高度，正文內(nèi)容的總高度等等信息，我在下圖中列出了在工作中最常用的幾個(gè)寬度和高度信息。并在本篇文章中對(duì)各種常見寬高進(jìn)行說(shuō)明。

二各類寬高說(shuō)明 2.1 window.innerHeight/window.innerWidth

window下的寬高屬性最常見的就是window.innerHeight/window.innerWidth了。這個(gè)屬性表示的是瀏覽器正文可見區(qū)域的高度和寬度。window.innerHeight包括水平滾動(dòng)條的部分（如果存在的話，在通常情況下 window.innerHeight == document.body.clientHeight)

2.2 window.outerHeight/window.outerWidth

window.outerHeight和window.outerWidth表示的是瀏覽器可見區(qū)域（正文加上其他的一些亂七八糟的高度和寬度，我自己的理解就是你能一眼看完的所有瀏覽器區(qū)域）

2.3 document.body.scrollHeight/document.body.scrollWidth

document.body.scrollHeight/document.body.scrollWidth表示的是瀏覽器所有正文部分的高度／寬度（即你一眼看不完的區(qū)域的高度和寬度也算在里面）

2.4 document.body.scrollTop/document.body.scrollLeft

這兩個(gè)高度表示的是水平和垂直滾動(dòng)條滾動(dòng)的距離。通常情況下
document.body.scrollTop + window.innerHeight(document.body.clientHeight) = document.body.scrollHeight
document.body.scrollLeft + window.innerWidth(document.body.clientWidth) = document.body.scrollWidth

所有，下列語(yǔ)句可以判斷一個(gè)滾動(dòng)容器是否滾動(dòng)容器底部

element.scrollHeight - element.scrollTop == element.clientHeight

GPU云服務(wù)器云服務(wù)器 Window窗口對(duì)象 windows窗口過(guò)程winapi asp獲取屏幕的寬高 js_window對(duì)象屬性

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/50773.html

相關(guān)文章

前端筆記(三) 前端如何防范XSS，淺談JS中各種寬高屬性

摘要：前端如何防范跨站腳本攻擊是一種攻擊者向用戶的瀏覽器注入惡意代碼腳本的攻擊。調(diào)用該方法后，該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點(diǎn)。不論鼠標(biāo)指針穿過(guò)被選元素或其子元素，都會(huì)觸發(fā)事件。前端如何防范XSS XSS ( Cross Site Scripting ) 跨站腳本攻擊, 是一種攻擊者向用戶的瀏覽器注入惡意代碼腳本的攻擊。 XSS攻擊的種類：持續(xù)型XSS攻擊 ...

劉厚水 2019-08-26 11:50 評(píng)論0 收藏0
JS、jQuery各種寬高屬性

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

CntChen 2019-08-22 10:46 評(píng)論0 收藏0
JavaScript中的各種寬高屬性

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

wangbinke 2019-08-20 12:21 評(píng)論0 收藏0
JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁(yè)的各種寬高屬性

摘要：獲得各種寬高的屬性還有公式網(wǎng)頁(yè)可見區(qū)域高滾動(dòng)條寬度測(cè)試的文字網(wǎng)頁(yè)可見區(qū)域?qū)挐L動(dòng)條寬度測(cè)試的文字的總高度滾動(dòng)條寬度邊框?qū)挾葴y(cè)試的文字的總寬度滾動(dòng)條寬度邊框?qū)挾葴y(cè)試的文字的解釋元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容滾動(dòng)總高度獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

Luosunce 2019-08-02 15:26 評(píng)論0 收藏0
JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁(yè)的各種寬高屬性

摘要：獲得各種寬高的屬性還有公式網(wǎng)頁(yè)可見區(qū)域高滾動(dòng)條寬度測(cè)試的文字網(wǎng)頁(yè)可見區(qū)域?qū)挐L動(dòng)條寬度測(cè)試的文字的總高度滾動(dòng)條寬度邊框?qū)挾葴y(cè)試的文字的總寬度滾動(dòng)條寬度邊框?qū)挾葴y(cè)試的文字的解釋元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見內(nèi)容滾動(dòng)總高度獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

XiNGRZ 2019-08-23 18:26 評(píng)論0 收藏0