亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

JavaScript獲取瀏覽器、元素、屏幕的寬高尺寸

Amio / 2667人閱讀

摘要：一瀏覽器視口的寬高瀏覽器視口寬度單位像素，如果存在滾動(dòng)條則包括它。二瀏覽器的寬高整個(gè)瀏覽器窗口的高度單位像素，包括側(cè)邊欄如果存在窗口鑲邊和窗口調(diào)正邊框。語(yǔ)法示例六屏幕的寬高屏幕分辨率寬高。

版權(quán)聲明 
轉(zhuǎn)載請(qǐng)告知并注明來(lái)源作者  
作者：唐金健  
網(wǎng)絡(luò)昵稱(chēng)：御焱  
掘金知乎思否專(zhuān)欄：優(yōu)雅的前端
前言 
有時(shí)候在獲取瀏覽器、元素、屏幕的尺寸，傻傻分不清。為了讓自己清晰認(rèn)識(shí)，能夠快速確定自己需要哪個(gè)屬性，現(xiàn)在把這些尺寸屬性整理了一下。
一、瀏覽器視口的寬高 Window.innerWidth、Window.innerHeight 
瀏覽器視口（viewport）寬度（單位：像素），如果存在滾動(dòng)條則包括它。
語(yǔ)法 
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;
備注

window.innerWidth和window.innerHeight是只讀屬性，無(wú)默認(rèn)值。

如果HTML中添加了以下內(nèi)容，則頁(yè)面在移動(dòng)端訪問(wèn)的時(shí)候，視口寬高始終與邏輯分辨率一致。
否則，移動(dòng)端瀏覽器會(huì)在一個(gè)通常比屏幕更寬的虛擬”窗口“（視口）中渲染頁(yè)面。

二、瀏覽器的寬高 Window.outerWidth、Window.outerHeight 
整個(gè)瀏覽器窗口的高度（單位：像素），包括側(cè)邊欄（如果存在）、窗口鑲邊（window chrome）和窗口調(diào)正邊框（window resizing borders/handles）。
語(yǔ)法 
let outerWidth = window.outerWidth;
let outerHeight = window.outerHeight;
備注

window.outerWidth和window.outerHeight是只讀屬性，無(wú)默認(rèn)值。
在使用桌面端瀏覽器的模擬移動(dòng)設(shè)備查看網(wǎng)頁(yè)時(shí)，這兩個(gè)屬性，依然指的是桌面端瀏覽器窗口的寬高。

三、元素內(nèi)部的寬高 Element.clientWidth、Element.clientHeight 
元素內(nèi)部寬 = width + padding-left + padding-right - 豎直滾動(dòng)條寬度  
元素內(nèi)部高 = height + padding-top + padding-bottom - 橫向滾動(dòng)條高度
語(yǔ)法 
let clientWidth = element.clientWidth;
let clientHeight = element.clientHight;
示例

四、元素的布局寬高 Element.offsetWidth、Element.offsetHight 
元素布局寬 = width + padding-left + padding-right + 豎直滾動(dòng)條寬度 + border-left + border-right  
元素布局高 = height + padding-top + padding-bottom + 橫向滾動(dòng)條高度 + border-top + border-bottom
語(yǔ)法 
let offsetWidth = element.offsetWidth;
let offsetHight = element.offsetHight;
示例

五、元素的內(nèi)容寬高 Element.scrollWidth、Element.scrollHeight 
元素的內(nèi)容寬高，包括由于溢出導(dǎo)致內(nèi)容在屏幕上下不可見(jiàn)的內(nèi)容。
語(yǔ)法 
let scrollWidth = element.scrollWidth;
let scrollHeight = element.scrollHeight;
示例

六、屏幕的寬高 Screen.width、Screen.height 
屏幕分辨率寬高。如果是移動(dòng)設(shè)備，則返回邏輯分辨率寬高。
語(yǔ)法 
let screenWidth = window.screen.width;
let screenHeight = window.screen.height;
七、屏幕的可用寬高 Screen.availWidth、Screen.availHeight 
減去比如Windows的任務(wù)欄等界面特性的屏幕的可用寬高。如果是移動(dòng)設(shè)備，則返回邏輯分辨率寬高。
語(yǔ)法 
let availWidth = window.screen.availWidth;
let availHeight = window.screen.availHeight;

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95108.html

相關(guān)文章

  • 瀏覽器元素尺寸與位置查詢(xún)指南

    摘要：前言這篇文章主要介紹了有關(guān)瀏覽器中獲取坐標(biāo)以及尺寸的幾種途徑算是比較全的一篇文章了在瀏覽器中獲取元素的坐標(biāo)以及尺寸是非常容易的有非常多種方式來(lái)完成這些需求但是雜亂的和很多兼容處理導(dǎo)致了瀏覽器中沒(méi)有直接的方式來(lái)獲取我們想要的結(jié)果仔細(xì)想想這個(gè)問(wèn) 前言 這篇文章主要介紹了有關(guān)瀏覽器中獲取坐標(biāo)以及尺寸的幾種途徑,算是比較全的一篇文章了. 在瀏覽器中獲取元素的坐標(biāo)以及尺寸是非常容易的,有非常多種...

    lei___ 評(píng)論0 收藏0

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

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

    woshicixide 評(píng)論0 收藏0

  • 移動(dòng)端開(kāi)發(fā)系列——像素與viewport

    摘要：目錄移動(dòng)端開(kāi)發(fā)的基本觀點(diǎn)像素基礎(chǔ)知識(shí)原理解析彈性布局響應(yīng)式設(shè)計(jì)的運(yùn)用移動(dòng)端的事件庫(kù)的使用移動(dòng)端開(kāi)發(fā)的基本觀點(diǎn)移動(dòng)端開(kāi)發(fā)的意義移動(dòng)端用戶(hù)使用量市場(chǎng)需求市場(chǎng)供給公司需要移動(dòng)端開(kāi)發(fā)人才工資高，就業(yè)易涌現(xiàn)大波程序猿到了猴年馬月，工資才會(huì) 目錄 移動(dòng)端開(kāi)發(fā)的基本觀點(diǎn) 像素基礎(chǔ)知識(shí) viewport原理解析 彈性布局 響應(yīng)式設(shè)計(jì) 1rem的運(yùn)用 移動(dòng)端的事件 zepto庫(kù)的使用 移動(dòng)端開(kāi)發(fā)的...

    JayChen 評(píng)論0 收藏0

  • 移動(dòng)端開(kāi)發(fā)系列——像素與viewport

    摘要：目錄移動(dòng)端開(kāi)發(fā)的基本觀點(diǎn)像素基礎(chǔ)知識(shí)原理解析彈性布局響應(yīng)式設(shè)計(jì)的運(yùn)用移動(dòng)端的事件庫(kù)的使用移動(dòng)端開(kāi)發(fā)的基本觀點(diǎn)移動(dòng)端開(kāi)發(fā)的意義移動(dòng)端用戶(hù)使用量市場(chǎng)需求市場(chǎng)供給公司需要移動(dòng)端開(kāi)發(fā)人才工資高，就業(yè)易涌現(xiàn)大波程序猿到了猴年馬月，工資才會(huì) 目錄 移動(dòng)端開(kāi)發(fā)的基本觀點(diǎn) 像素基礎(chǔ)知識(shí) viewport原理解析 彈性布局 響應(yīng)式設(shè)計(jì) 1rem的運(yùn)用 移動(dòng)端的事件 zepto庫(kù)的使用 移動(dòng)端開(kāi)發(fā)的...

    lingdududu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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