110JS--其他样式相关属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">         
            #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 type="text/javascript">
            
            window.onload = function(){
                var box1 = document.getElementById("box1");
                var btn01 = document.getElementById("btn01");
                var box4 = document.getElementById("box4");
                
                btn01.onclick = function(){
                    /*
                     * clientWidth
                     * clientHeight
                     *  - 这两个属性可以获取元素的可见宽度和高度
                     *  - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
                     *  - 会获取元素宽度和高度，包括内容区和内边距
                     *  - 这些属性都是只读的，不能修改
                     */
                    //alert(box1.clientWidth);
                    //alert(box1.clientHeight);
                    //box1.clientHeight = 300;
                    
                    /*
                     * offsetWidth
                     * offsetHeight
                     *  - 获取元素的整个的宽度和高度，包括内容区、内边距和边框
                     */
                    //alert(box1.offsetWidth);
                    
                    /*
                     * offsetParent
                     *  - 可以用来获取当前元素的定位父元素
                     *  - 会获取到离当前元素最近的开启了定位的祖先元素
                     *      如果所有的祖先元素都没有开启定位，则返回body
                     */
                    var op = box1.offsetParent;
                    
                    //alert(op.id);
                    
                    /*
                     * offsetLeft
                     *  - 当前元素相对于其定位父元素的水平偏移量
                     * offsetTop
                     *  - 当前元素相对于其定位父元素的垂直偏移量
                     */
                    
                    //alert(box1.offsetLeft);
                    
                    /*
                     * scrollWidth
                     * scrollHeight
                     *  - 可以获取元素整个滚动区域的宽度和高度
                     */
                    //alert(box4.clientHeight);
                    //alert(box4.scrollWidth);
                    
                    /*
                     * scrollLeft
                     *  - 可以获取水平滚动条滚动的距离
                     * scrollTop
                     *  - 可以获取垂直滚动条滚动的距离
                     */
                    //alert(box4.scrollLeft);
                    //alert(box4.scrollTop);
                    
                    //alert(box4.clientHeight); // 283
                    
                    //当满足scrollHeight - scrollTop == clientHeight
                    //说明垂直滚动条滚动到底了
                    
                    //当满足scrollWidth - scrollLeft == clientWidth
                    //说明水平滚动条滚动到底
                    //alert(box4.scrollHeight - box4.scrollTop); // 600
                    
                    
                    
                };
                
            };
            
            
        </script>
    </head>
    <body id="body">
        <button id="btn01">点我一下</button>
        <br /><br />
        
         <div id="box4">
            <div id="box5"></div>
         </div>
        
        
        
        <br /><br />
        
        <div id="box3">
            <div id="box2" style="position: relative;">
                <div id="box1"></div>
            </div>
        </div>
        
        
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            #info{
                width: 300px;
                height: 500px;
                background-color: #bfa;
                overflow: auto;
            }
            
        </style>
        <script type="text/javascript">
            window.onload = function(){
                
                /*
                 * 当垂直滚动条滚动到底时使表单项可用
                 * 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>
    </head>
    <body>
        <h3>欢迎亲爱的用户注册</h3>
        <p id="info">
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
            亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
        </p>
        <!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
        <input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
        <input type="submit" value="注册" disabled="disabled" />
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容