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

  • Jesse
  • 2013-12-19 18:52:00
  • 485
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>