JavaScript获取浏览器高度和宽度值

IE中：

document.body.clientWidth ==> *DY对象宽度

document.body.clientHeight ==> *DY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

FireFox中：

document.body.clientWidth ==> *DY对象宽度

document.body.clientHeight ==> *DY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

Opera中：

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度（即*DY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即*DY对象高度加上Margin高）

没有定义W3C的标准，则

IE为：

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为：

document.documentElement.clientWidth ==> 页面对象宽度（即*DY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度（即*DY对象高度加上Margin高）

Opera为：

document.documentElement.clientWidth ==> 页面对象宽度（即*DY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即*DY对象高度加上Margin高）

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

HTML精确定位：scrollLeft、scrollWidth、clientWidth、offsetWidth

scrollWidth ==> 获取对象的滚动宽度
scrollHeight ==> 获取对象的滚动高度
scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（被卷去的左）
scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离（被卷去的高）
offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

event.clientX ==> 相对文档的水平座标

event.clientY ==> 相对文档的垂直座标

event.offsetX ==> 相对容器的水平坐标

event.offsetY ==> 相对容器的垂直坐标

document.documentElement.scrollTop ==> 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html "http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">

浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"/><br />
浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">

</script>
</body>
</html>

附 HTML 测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html "http://www.w3.org/1999/xhtml">
<head>
<title>属性值测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
/* reset */
body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, button, input, textarea, th, td{margin:0; padding:0;}
body{font:12px/1.2 Arial, "宋体"; color:#333;vertical- align: middle;_background:url(about:blank) fixed;_height:100%;background:#FFF;}
button, input, select, textarea, label{vertical-align:middle;}
img{vertical-align:top; border:none;}
ul, ol{list-style:none;}
a{text-decoration:none; color:#474747; vertical-align:baseline; cursor:pointer;}
a:hover{text-decoration:none; color:#f76f0e;}
table{border-collapse:collapse; border-spacing:0;}
b{font-weight: normal;}

/* test */
body{border:10px solid #6F6;}
.wrapper{width:800px;height:500px;border:1px solid #F00;margin:0 auto;}
.div1{margin-top:50px;border:1px solid #CCC;padding:10px;margin-left:10px;}
.div2{margin-top:70px;border:1px solid #00F;}
</style>
<script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
    <div class="wrapper" id="wrapper">
        <div class="div1" id="div1">
            div1,div1,div1,div1,div1,div1,div1,div1,div1,
            div1,div1,div1,div1,div1,div1,div1,div1,div1,div1
        </div>
        <div class="div2" id="div2">
            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
            <br/>
            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
            <br/>
            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
            <br/>
            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
            <br/>
            div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,
        </div>
    </div>
</body>
</html>

汇总

////////浏览器视口的高度
function windowHeight() {
    var myHeight = 0;
    if (typeof(window.innerHeight) == 'number') {
        //Non-IE
        myHeight = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;
    } else if (document.body && (document.body.clientHeight)) {
        //IE 4 compatible
        myHeight = document.body.clientHeight;
    }
    return myHeight;
}
/////////浏览器视口的宽度
function windowWidth() {
    var myWidth = 0;
    if (typeof(window.innerWidth) == 'number') {
        //Non-IE
        myWidth = window.innerWidth;
    } else if (document.documentElement && (document.documentElement.clientWidth)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
    } else if (document.body && (document.body.clientWidth)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
    }
    return myWidth;
}
/**** 浏览器垂直滚动位置 ****/
function scrollY() {
    var de = document.documentElement;
    return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}

/**** 浏览器水平滚动位置 ****/
function scrollX() {
    var de = document.documentElement;
    return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}

/**** 当前页面高度 ****/
function pageHeight() {
    return document.body.scrollHeight;
}

/**** 当前页面宽度 ****/
function pageWidth() {
    return document.body.scrollWidth;
}

原标题：JavaScript获取浏览器高度和宽度值

关键词：JavaScript

JavaScript

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： admin#shaoqun.com （#换成@）。

Trapica：https://www.goluckyvip.com/tag/26577.html
TrashMail：https://www.goluckyvip.com/tag/26578.html
Traveloka：https://www.goluckyvip.com/tag/26579.html
小红书APP：https://www.goluckyvip.com/tag/2658.html
Travelpro：https://www.goluckyvip.com/tag/26580.html
Trax：https://www.goluckyvip.com/tag/26581.html
船底顶攻略（船底顶最详细攻略）：https://www.vstour.cn/a/411239.html
川藏线自驾游要怎么走才比较划算呢？：https://www.vstour.cn/a/411240.html