JavaScript obtain browser height and width values (documentElement, clientHeight, offsetHeight, scrollHeight, scrollTop, offsetParent, offsetY, innerHeight)

Transfer from  https://www.cnblogs.com/lvdabao/articles/3651779.html

 

In IE:

document.body.clientWidth ==> BODY The object width

document.body.clientHeight ==> BODY target height

document.documentElement.clientWidth ==> visible region width

document.documentElement.clientHeight ==> highly visible region

In FireFox: 

document.body.clientWidth ==> BODY The object width

document.body.clientHeight ==> BODY target height

document.documentElement.clientWidth ==> visible region width

document.documentElement.clientHeight ==> highly visible region

Opera in: 

document.body.clientWidth ==> visible region width

document.body.clientHeight ==> highly visible region

document.documentElement.clientWidth ==> page object width (i.e. width of the object plus BODY Margin Width)

document.documentElement.clientHeight ==> page height of the object (ie, the object height plus BODY High Margin)

Not defined W3C standards, the

IE currency and: 

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox is:

document.documentElement.clientWidth ==> page object width (i.e. width of the object plus BODY Margin Width)

document.documentElement.clientHeight ==> page height of the object (ie, the object height plus BODY High Margin)

Opera is: 

document.documentElement.clientWidth ==> page object width (i.e. width of the object plus BODY Margin Width)

document.documentElement.clientHeight ==> page height of the object (ie, the object height plus BODY High Margin)

Page wide visible region: document.body.clientWidth 
pages high visible region: document.body.clientHeight 
page wide visible region: document.body.offsetWidth (including edge width) 
pages high visible region: document.body.offsetHeight (including the edges H) 
text pages full width: document.body.scrollWidth 
text pages GAO: document.body.scrollHeight 
page is to a high volume: document.body.scrollTop 
web is rolled to the left: document.body.scrollLeft 
on pages body section : window.screenTop 
body of the page portion of the left: window.screenLeft 
screen resolution high: window.screen.height 
screen resolution width: window.screen.width 
available screen height workspace: window.screen.availHeight 
screen width available workspace : window.screen.availWidth

(Note: margin property in CSS, and clientWidth, offsetWidth, clientHeight, offsetHeight are unrelated)

HTML precise positioning: scrollLeft, scrollWidth, clientWidth, offsetWidth

scrollWidth ==> Get the width of the object rolling 
the scrollHeight ==>   Get Object height scrolling 
the scrollLeft ==> Gets or sets the window object located in the left and a distance between the currently visible contents of the leftmost (left to be wound) 
scrollTop ==> set or get the distance (to be wound high) positioned between the top and the top of the object visible in the window content of 
the offsetLeft ==> Get object relative to the layout or calculate the left by the specified coordinate parent attribute offsetParent position 
offsetTop ==> Get the top position of the object relative to the layout or calculate specified by the attribute of the parent coordinate offsetTop 
offsetHeight get the object ==> or relative to the layout specified by the coordinates of the parent coordinate parent offsetParent property height

event.clientX ==> horizontal coordinate relative to the document

event.clientY ==> the vertical coordinate relative to the document

The horizontal coordinate event.offsetX ==> relative to the container

The vertical coordinate event.offsetY ==> relative to the container

document.documentElement.scrollTop ==> vertical scroll value

event.clientX + document.documentElement.scrollTop ==> horizontal coordinate relative to the document in the direction perpendicular to the rolling amount +

Implementation code:

<! DOCTYPE HTML the PUBLIC " - // the W3C // DTD XHTML 1.0 Transitional // EN " 
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > 
<HTML xmlns = " HTTP : //www.w3.org/1999/xhtml " > 
<head> 
<title> Please adjust your browser window </ title> <Meta HTTP-equiv = " Content-of the type " Content = " text / HTML; charset = GB2312 " > 
</ Meta> </ head> 
<body> 
<H2 align = left = " Center " > adjust the size of the browser window </ H2> <HR /> 
<form = Action "#" method="get"= name " Form1 " ID = " Form1 " > 
<- shows the actual size of the browser window ->! 
actual height of the browser window: <INPUT type = " text " name = " availHeight " size = " . 4 " / > <br /> 
actual width of the browser window: <INPUT type = " text " name = " availWidth " size = " . 4 " /> <br /> 
</ form> 
<Script type = " text / JavaScript ">
<!--var winWidth = 
0 ;
 var winHeight = 0 ; 

// Function: Get Size 
function findDimensions () { 

    // Get the window width 
    IF (window.innerWidth) { 
        winWidth = window.innerWidth; 
    } the else  IF ((the document.body) && (the document.body .clientWidth)) { 
        winWidth = document.body.clientWidth; 
    } 

    // Get the window height 
    IF (window.innerHeight) { 
        winHeight = window.innerHeight; 
    } the else  IF ((the document.body) &&(document.body.clientHeight)) { 
        winHeight = document.body.clientHeight; 
    } 

    // depth of the inner body detecting Document, acquisition window size 
    IF (document.documentElement && && document.documentElement.clientHeight document.documentElement.clientWidth) { 
        winHeight = document.documentElement.clientHeight; 
        winWidth = document.documentElement.clientWidth; 
    } 

    // result is output to the two text boxes 
    document.form1.availHeight.value = winHeight; 
    document.form1.availWidth.value = winWidth; 
} 

findDimensions ( ); 

// call the function to get the value
window.onresize = findDimensions;

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

HTML attachment test code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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="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>

Gather

////////浏览器视口的高度
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; 
    } the else  IF (the document.body && (document.body.clientWidth)) {
         // IEs. 4 compatible 
        myWidth = document.body.clientWidth; 
    } 
    return myWidth; 
} 
/ * *** browser vertical scroll position *** * / 
function scrollY () { 
    var de = document.documentElement;
     return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop; 
} 

/ * *** browser horizontal scroll position *** * / 
function the scrollX () { 
    var de = document.documentElement;
    return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft; 
} 

/ * *** the height of the current page *** * / 
function pageHeight () { 
    return document.body.scrollHeight; 
} 

/ * The current page width *** *** * / 
function pageWidth () { 
    return document.body.scrollWidth; 
}