machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 10px solid yellow;
        }

        #box2{
            padding: 100px;
            background-color: #bfa;
        }

        #box4{
            width: 200px;
            height: 300px;
            background-color: #bfa;
            overflow: auto;
        }

        #box5{
            width: 450px;
            height: 600px;
            background-color: yellow;
        }

    </style>
    <script>

        window.onload = function () {
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                /**
                 * clientWidth
                 * clientHeight
                 *  -这两个属性可以获取元素的可见宽度和高度
                 *  -这些属性都是不带px的，返回都是一个数字，可以直接进行计算
                 *  -会获取元素宽度和高度，包括内容区和内边距（不包括边框）
                 *  -这些属性都是只读的，不能修改
                */
                //alert(box1.clientWidth);
                //alert(box1.clientHeight);
                // box1.clientHeight = 200;

                /**
                 * offsetWidth
                 * offsetHeight
                 *  -获取元素的整个的宽度和高度，包括内容区、内边距和边框
                */

                // alert(box1.offsetWidth);

                /**
                 * offsetParent
                 *  -可以用来获取当前元素的定位父元素
                 *  -会获取到离当前元素最近的开启了定位的祖先元素
                 *      如果所有的祖先元素都没有开启定位，则返回body
                */

                var op = box1.offsetParent;
                // alert(op);
                // alert(op.id);

                /**
                 * offsetLeft
                 *  -当前元素相对于其定位父元素的水平偏移量
                 * offsetTop
                 *  -当前元素相对于其定位父元素的垂直偏移量
                */

                // alert(box1.offsetLeft);

                /**
                 * scrollWidth
                 * scrollHeight
                 *  -可以获取元素整个滚动区域的宽度和高度
                */
                var box4 = document.getElementById("box4");
                // alert(box4.clientHeight);//300，可见区域的高度
                // alert(box4.scrollHeight);//600，滚动区域的高度
                // alert(box4.scrollWidth);//600，滚动区域的宽度

                /**
                 * scrollLeft
                 *  -可以获取水平滚动条滚动的距离
                 * scrollTop
                 *  -可以获取垂直滚动条滚动的距离
                */
                alert(box4.scrollLeft);
                alert(box4.scrollTop);

                alert(box4.clientHeight);//283
                //当满足scrollHeight-scrollTop==clientHeight
                //说明垂直滚动条滚动到底了
                alert(box4.scrollHeight-box4.scrollTop);//283

                //当满足scrollWidth-scrollLeft==clientWidth
                //说明水平滚动条滚动到底了
            }
        };

    </script>
</head>

<body id="body">
    <button id="btn01">点一下</button>
    <div id="box4">
        <div id="box5"></div>
    </div>
    <br /><br />
    <!-- <div id="box3" style="position: relative;">
        <div id="box2" style="position: relative;">
            <div id="box1"></div>
        </div>
    </div> -->

    <div id="box3">
        <div id="box2" style="position: relative;">
            <div id="box1"></div>
        </div>
    </div>
    
</body>

</html>