JS设置CSS属性的其他方法

clientWidth和clientHeight

这两个属性可以获取元素的可见宽度和高度
这些属性都是不带px的,返回都是一个数字，可以直接进行计算
会获取元素宽度和高度，包括内容区和内边距
这些属性都是只读的，不能修改
例如：box1.clientWidth

offsetWidth和offsetHeight

获取元素的整个的宽度和高度，包括内容区、内边距和边框
例如：box1.offsetWidth

offsetParent

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

    <body>
        <div id="box2" style="position: relative;">
            <div id="box1" width="100px"></div>
        </div>      
    </body>
    <script>
        alert(box1.offsetParent);
    </script>

offsetLeft和offsetTop

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box2{
                width: 200px;
                padding: 100px;
                background-color: #bfa;
                margin: 50px;
            }
            #box1 {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box2" style="position: relative;">
            <div id="box1" width="100px"></div>
        </div>      
    </body>
    <script>
        alert(box1.offsetLeft);//100
    </script>
</html>

scrollWidth和scrollHeight

可以获取元素整个滚动区域的宽度和高度

scrollLeft和scrollTop

scrollLeft-可以获取水平滚动条滚动的距离
scrollTop-可以获取垂直滚动条滚动的距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box1{
                width: 500px;
                height: 500px;
                background-color: red;
            }
            #box2{
                width: 300px;
                height: 300px;
                background-color: #bfa;         
                overflow: auto; 
            }

        </style>
    </head>
    <body>
        <div id="box2" style="position: relative;">
            <div id="box1"></div>
        </div>      
    </body>
    <script>
        alert(box2.scrollHeight);//500
                
                alert(box2.scrollLeft);//0
    </script>
</html>

当满足scrol1Height – scrollTop == clientHeight，说明垂直滚动条滚动到底了
当满足scrollWidth – scrollLeft == clientWidth，说明水平滚动条滚动到底了

垂直滚动条到底练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #info{
                width: 300px;
                height: 500px;
                background-color: #bfa;
                overflow: auto;
            }

        </style>
    </head>
    <body>
        <h3>欢迎注册！</h3>
        <p id="info">
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！            
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
            欢迎亲爱的用户注册，请仔细阅读以下协议，全部阅读完毕，方可注册！
        </p>
        <!--如果为表单项添加disabled="disabled”则表单项将变成不可用的状态-->
        <input type="checkbox" disabled="disabled"/>我已阅读完毕，同意以上协议。
        <input type="submit" value="注册" disabled="disabled"/>
    </body>
    <script>
        //当垂直滚动条滚动到底时使表单项可用
        //onscroll  -该事件会在元素的滚动条滚动时触发
        //获取id为info的p元素
        var info=document.getElementById("info");
        //获取两个表单项
        var inputs=document.getElementsByTagName("input");
        //为info绑定一个滚动条滚动的事件
        info.onscroll=function(){
            //检查垂直滚动条是否滚动到底
            if(info.scrollHeight-info.scrollTop==info.clientHeight){
                //滚动条滚动到底，使表单项可用
                //disabled属性可以设置一个元素是否禁用
                //如果设置为true，则元素禁用,如果设置为false，则元素可用
                inputs[0].disabled = false;
                inputs[1].disabled = false;
            }
        };

    </script>
</html>

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END