在前端的動態邏輯中,有時候需要使用js獲取瀏覽器可視區域,屏幕或是網頁的寬度和高度。那么在原生的js代碼是能讓jq插件中是如何操作的呢?

原生js獲取各個對象的高度和寬度

js代碼:

IE瀏覽器:

document.body.clientWidth //BODY對象寬度
document.body.clientHeight //BODY對象高度
document.documentElement.clientWidth //可見區域寬度
document.documentElement.clientHeight //可見區域高度

FireFox瀏覽器:

document.body.clientWidth //BODY對象寬度
document.body.clientHeight //BODY對象高度
document.documentElement.clientWidth //可見區域寬度
document.documentElement.clientHeight //可見區域高度

Opera瀏覽器:

document.body.clientWidth //可見區域寬度
document.body.clientHeight //可見區域高度
document.documentElement.clientWidth //頁面對象寬度(即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight //頁面對象高度(即BODY對象高度加上Margin高)

獲取其他參數

alert(document.body.clientWidth);//網頁可見區域寬(body)
alert(document.body.clientHeight);//網頁可見區域高(body)
alert(document.body.offsetWidth);//網頁可見區域寬(body),包括border、margin等
alert(document.body.offsetHeight);//網頁可見區域寬(body),包括border、margin等
alert(document.body.scrollWidth);//網頁正文全文寬,包括有滾動條時的未見區域
alert(document.body.scrollHeight);//網頁正文全文高,包括有滾動條時的未見區域
alert(document.body.scrollTop);//網頁被卷去的Top(滾動條)
alert(document.body.scrollLeft);//網頁被卷去的Left(滾動條)
alert(window.screenTop);//瀏覽器距離Top
alert(window.screenLeft);//瀏覽器距離Left
alert(window.screen.height);//屏幕分辨率的高
alert(window.screen.width);//屏幕分辨率的寬
alert(window.screen.availHeight);//屏幕可用工作區的高
alert(window.screen.availWidth);//屏幕可用工作區的寬

jq獲取瀏覽器以及網頁的各個參數

相對原生的js代碼來說,jquery操作起來要簡單的很高。

注意:以下代碼使用之前,一定要加載jquery.js

jq代碼:

alert($(window).height()); //瀏覽器當前窗口可視區域高度
alert($(document).height());//瀏覽器當前窗口文檔的高度
alert($(document.body).height()); //瀏覽器當前窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert($(window).width());//瀏覽器當前窗口可視區域寬度
alert($(document).width());//瀏覽器當前窗口文檔對象寬度
alert($(document.body).width());//瀏覽器當前窗口文檔body的寬度
alert($(document.body).outerWidth(true));  //瀏覽器當前窗口文檔body的總寬度 包括border padding margin