Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]
Javascript:
?
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); ? ? ? ? ? //屏幕可用工作區的寬
?
Jquery
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
<!DOCTYPE html> <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <html><head><title>aaa</title></head><body> <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa</h1><p>Welcome to aaa</p> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1> <h1>aaa</h1></body> </html><script type="text/javascript"> alert(document.body.clientWidth); alert(document.body.clientHeight); alert(document.body.offsetWidth); alert(document.body.offsetHeight);alert(document.body.scrollWidth); alert(document.body.scrollHeight);alert(document.body.scrollTop); alert(document.body.scrollLeft); alert(window.screenTop); alert(window.screenLeft); alert(window.screen.height); alert(window.screen.width); alert(window.screen.availHeight); alert(window.screen.availWidth);//alert($(document).height()); //alert($(document).width()); </script>
?
轉載于:https://www.cnblogs.com/jshare/p/8624629.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于I2C总线的0.96寸OLED显示屏
- 下一篇： 单片机学习问题集