国产视频app今天在寫一個js效果時,需要用到瀏覽器顯示區域高度的值,所以就查了一下相關的js方法,發現里面的道道還真的不少。下面就來詳細的說一下。

先上圖,再看內容!

TIM截圖20200622225041.png

圖片來自網絡,侵刪

js獲取瀏覽器可視區域的高度和寬度的方法

1、獲取沒有聲明 DOCTYPE IE瀏覽器顯示窗口的大小

document.body.offsetWidth
document.body.offsetHeight

国产视频app2、獲取聲明 DOCTYPE 瀏覽器顯示窗口的大小

document.documentElement.clientWidth  //表示HTML文檔所在窗口的當前寬度;
document.documentElement.clientHeight //表示HTML文檔所在窗口的當前高度;

其它獲取瀏覽器高度與寬度的方法

国产视频app網頁可見區域寬: document.body.clientWidth;  //表示HTML文檔所在窗口的當前寬度;

網頁可見區域高: document.body.clientHeight; //表示HTML文檔所在窗口的當前高度;

国产视频app網頁可見區域高: document.body.offsetWidth;  //包括邊線的寬

網頁可見區域高: document.body.offsetHeight; //包括邊線的寬

国产视频app網頁正文全文寬: document.body.scrollWidth;  //對象的滾動寬度

網頁正文全文高: document.body.scrollHeight; //對象的滾動高度。

国产视频app網頁被卷去的高: document.body.scrollTop;  //對象最頂端和窗口中可見內容的最頂端之間的距離

網頁被卷去的左: document.body.scrollLeft;  //對象左邊界和窗口中目前可見內容的最左端之間的距離

網頁正文部分上: window.screenTop; 

網頁正文部分左: window.screenLeft; 

国产视频app屏幕分辨率的高: window.screen.height;

屏幕分辨率的寬: window.screen.width;

屏幕可用工作區高度: window.screen.availHeight; 

国产视频app屏幕可用工作區寬度: window.screen.availWidth;

瀏覽器的高(瀏覽器窗口內部)window.innerHeight;

瀏覽器的寬(瀏覽器窗口內部)window.innerWidth;

offsetWidth 與 offsetHeight 注釋

国产视频appoffsetWidth = scrollWidth + 左右滾動條 +左右邊框;

offsetHeight = scrollHeight + 上下滾動條 + 上下邊框;

常用的兼容代碼

代碼1:

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

代碼2:

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

各個瀏覽器js獲取高度與寬度的方法

IE中:

document.body.clientWidth ==> BODY對象寬度

document.body.clientHeight ==> BODY對象高度

国产视频appdocument.documentElement.clientWidth ==> 可見區域寬度

国产视频appdocument.documentElement.clientHeight ==> 可見區域高度

FireFox中:

document.body.clientWidth ==> BODY對象寬度

国产视频appdocument.body.clientHeight ==> BODY對象高度

国产视频appdocument.documentElement.clientWidth ==> 可見區域寬度

国产视频appdocument.documentElement.clientHeight ==> 可見區域高度

Opera中:

国产视频appdocument.body.clientWidth ==> 可見區域寬度

国产视频appdocument.body.clientHeight ==> 可見區域高度

国产视频appdocument.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)

document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)

沒有定義W3C的標準,則

IE為:

document.documentElement.clientWidth ==> 0

国产视频appdocument.documentElement.clientHeight ==> 0

FireFox為:

document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)

document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)

Opera為:

国产视频appdocument.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)

document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)