Javascript、Jquery獲取瀏覽器和屏幕各類高度寬度[mark]

時間 2019-12-07

標籤 javascript jquery 獲取瀏覽器屏幕各類高度寬度 mark 欄目 JavaScript 简体版

原文原文鏈接

Javascript: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高）html

alert(document.body.clientWidth); //網頁可見區域寬(body)java

alert(document.body.clientHeight); //網頁可見區域高(body)jquery

alert(document.body.offsetWidth); //網頁可見區域寬(body)，包括border、margin等瀏覽器

alert(document.body.offsetHeight); //網頁可見區域寬(body)，包括border、margin等htm

alert(document.body.scrollWidth); //網頁正文全文寬，包括有滾動條時的未見區域對象

alert(document.body.scrollHeight); //網頁正文全文高，包括有滾動條時的未見區域blog

alert(document.body.scrollTop); //網頁被捲去的Top(滾動條)ip

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>