js获取屏幕和网页的大小属性

Jesse
2013-12-19 18:52:00
3376
js获取屏幕和网页的大小属性，记不住的可以收藏下
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <link rel="stylesheet" href="">
</head>
<body onload="a()">
    <input onclick="set_bgColor();" type="button" value="set_bgColor">
        <br>
            <input onclick="set_bgImg()" type="button" value="set_bgImg">
            </input>
        </br>
    </input>
<script type="text/javascript">
    function a(){
        document.write(
        "屏幕分辨率为："+screen.width+"*"+screen.height  //最好是window.screen
        +"<br />"+
        "屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
        +"<br />"+
        "网页可见区域宽："+document.body.clientWidth
        +"<br />"+
        "网页可见区域高："+document.body.clientHeight
        +"<br />"+
        "网页可见区域宽(包括边线的宽)："+document.body.offsetWidth
        +"<br />"+
        "网页可见区域高(包括边线的宽)："+document.body.offsetHeight
        +"<br />"+
        "网页正文全文宽："+document.body.scrollWidth
        +"<br />"+
        "网页正文全文高："+document.body.scrollHeight
        +"<br />"+
        "网页被卷去的高："+document.body.scrollTop
        +"<br />"+
        "网页被卷去的左："+document.body.scrollLeft
        +"<br />"+
        "网页正文部分上："+window.screenTop
        +"<br />"+
        "网页正文部分左："+window.screenLeft
        +"<br />"+
        "屏幕分辨率的高："+window.screen.height
        +"<br />"+
        "屏幕分辨率的宽："+window.screen.width
        +"<br />"+
        "屏幕可用工作区高度："+window.screen.availHeight
        +"<br />"+
        "屏幕可用工作区宽度："+window.screen.availWidth
        );
    }
    function set_bgColor(){
       document.body.style.backgroundColor="red";
    }
    function set_bgImg(){
       document.body.style.backgroundImage="url(images/123.jpg)";
    }
</script>
</body>
</html>