BOM与CSS布局-优快云博客

本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/76780000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
</head>
<style type="text/css">

    body{margin:0;}
    div{width: 100px;height: 100px;border:1px solid #000;}
    div>div{width: 50px;height: 400px;background: #f00;}

</style>
<script>

window.onload=function (){

    /*      
        窗口可视区宽高

        document.documentElement.clientWidth;

        document.documentElement.clientHeight
    */
    /*  
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
    */


    /*  
        滚动条距离窗口的距离

        documentElement.scrollTop

        documentElement.scrollLeft
    */
/*      
    //兼容性方案，chrome认为滚动条时body的
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    console.log(scrollTop);
*/

/*
    scrollHeight  返回元素的整体高度,包括内容和边框，超出的内容也算
    scrollWidth   返回元素的整体宽度
*/
/*  var oDiv1=document.getElementById('div1');

    console.log(oDiv1.scrollHeight);
*/


};
</script>
</head>
<body style="height:2000px;">

    <div id="div1"><div></div></div>
</body>
</html>

BOM基础二