JS與Jquery獲取屏幕、瀏覽器、頁(yè)面的寬度和高度對(duì)比整理
一個(gè)頁(yè)面的展示,從外到內(nèi)的容器為:屏幕、瀏覽器以及頁(yè)面本身。HTML元素展現(xiàn)在頁(yè)面內(nèi),頁(yè)面展現(xiàn)在瀏覽器內(nèi),而瀏覽器展現(xiàn)在屏幕內(nèi)。通過(guò)Js的一些對(duì)象可以獲取這些容器的高度、寬度。容器的尺寸是指當(dāng)前分辨率下的高度和寬度(分辨率不同,值就不相同)。
Javascript獲取各種屏幕的寬度和高度
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高: document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高: document.body.offsetHeight (包括邊線的高)
網(wǎng)頁(yè)正文全文寬: document.body.scrollWidth
網(wǎng)頁(yè)正文全文高: document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高: document.body.scrollTop
網(wǎng)頁(yè)被卷去的左: document.body.scrollLeft
網(wǎng)頁(yè)正文部分上: window.screenTop
網(wǎng)頁(yè)正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的寬: window.screen.width
屏幕可用工作區(qū)高度: window.screen.availHeight
屏幕可用工作區(qū)寬度: window.screen.availWidth
jQuery獲取各種屏幕的寬度和高度
$(document).ready(function(){ alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度 alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 alert($(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾? alert($(document).width());//瀏覽器當(dāng)前窗口文檔對(duì)象寬度 alert($(document.body).width());//瀏覽器當(dāng)前窗口文檔body的寬度 alert($(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin })
到此這篇關(guān)于JS與Jquery獲取屏幕、瀏覽器、頁(yè)面的寬度和高度對(duì)比整理的文章就介紹到這了,更多相關(guān)JS與Jquery獲取寬度和高度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JSON數(shù)據(jù)中存在單個(gè)轉(zhuǎn)義字符“\”的處理方法
這篇文章主要介紹了JSON數(shù)據(jù)中存在單個(gè)轉(zhuǎn)義字符“\”的處理方法,在這里反斜杠(又稱右斜杠"\"),還表示轉(zhuǎn)義字符,字符串中不能成單出現(xiàn)。具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧2018-07-07javascript獲取網(wǎng)頁(yè)各種高寬及位置的方法總結(jié)
下面小編就為大家?guī)?lái)一篇javascript獲取網(wǎng)頁(yè)各種高寬及位置的方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07JavaScript操作Oracle數(shù)據(jù)庫(kù)示例
這篇文章主要介紹了JavaScript操作Oracle數(shù)據(jù)庫(kù)示例,本文使用ActiveXObject實(shí)現(xiàn)訪問(wèn)Oracle數(shù)據(jù)庫(kù),需要的朋友可以參考下2015-03-03獲取Javscript執(zhí)行函數(shù)名稱的方法
獲取Javscript執(zhí)行函數(shù)名稱的方法...2006-12-12node.js使用nodemailer發(fā)送郵件實(shí)例
這篇文章主要介紹了node.js使用nodemailer發(fā)送郵件的方法,例子中使用的是QQ郵箱,你也可以修改成其它的郵箱如163、gmail等,需要的朋友可以參考下2014-03-03比較全面的event對(duì)像在IE與FF中的區(qū)別 推薦
整理的比較全的event對(duì)像在ie與firefox瀏覽器中的區(qū)別。2009-09-09