2022/1/12，其他样式操作属性，js操作属性

本文链接：https://blog.csdn.net/weixin_44645655/article/details/122462594
<!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 type="text/css">
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
            
        }

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

        }

        #box5{
            width: 220px;
            height: 600px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var btn01=document.getElementById("btn01");
            var box1 =document.getElementById("box1");
            btn01.onclick=function(){
                //clientWidth
                //clientHeight
                /*
                *这两个属性可以获取元素的宽度和高度
                *   获取到的值是不带px的，可以直接进行计算
                *   会获取宽度和高度，包括内容区和内边距
                *   这些属性都是只读的，不能修改
                */
                // alert(box1.clientWidth);
                // alert(box1.clientHeight);

                
                /*
                *offsetWidth
                *offsetHeight
                *这两个属性可以获取元素整个的宽度和高度
                *   会获取宽度和高度，包括内容区和内边距，包括边框
                *
                */

                // alert(box1.offsetHeight);
                // alert(box1.offsetWidth);

               /*
                *offsetParent
                *这个属性可以获取当前元素的定位父元素
                *   -会获取到离当前元素最近的开启了定位的祖先元素
                *   -如果祖先元素都没有开启定位，则会返回body
                *
                */
                // var ap = box1.offsetParent;
                // alert(ap.id);

                /*
                *offsetLeft
                *   当前元素相当于定位元素的水平偏移量
                *offsetTop
                *   当前元素相当于定位元素的垂直偏移量
                */
            //    alert(box1.offsetLeft);
            //    alert(box1.offsetTop);

            //scrollWidth可以获取元素和样式的宽度和高度
            // alert(box4.scrollWidth);
            // //scrollWidth可以获取滚动条的垂直距离
            // alert(box4.scrollHeight);

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

            //当满足scrollHeight-scrollTop==offsetHeight;
            //说明垂直滚动条到底了

            // alert(box4.scrollHeight-box4.scrollTop);

            //当满足scrollWidth-scrollLeft==offsetWidth;
            //说明水平滚动条到底了
            alert(box4.scrollWidth-box4.scrollLeft);


            








            };
        };
    </script>
</head>
<body id="body">
    <button id="btn01">点我一下</button>
    <br><br>

    <div id="box4">
        <div id="box5"></div>
    </div>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>



    <div id="box2" >
        <div id="box1"></div>
    </div>
    
</body>
</html>