js基础_67、其它样式相关的属性

clientHeight

clientWidth
这两个属性可以获取元素的可见宽度和高度。
这些属性返回的都是不带单位(px)的，返回的都是一个数字，可以直接进行计算， 会获取元素的宽度和高度，包括内容区和内边距，但是除开边框。
这些属性都是只读的，不能修改。

offsetHeight

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

offsetParent

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

<div id="box1" style="position: relative;">
            <div id="box0">
                <div id='mydiv'></div>
            </div>
</div>
<button id='btn1'>获取样式信息</button>

js代码如下：

window.onload=function(){
                var box1=document.getElementById("mydiv");
                var btn=document.getElementById("btn1");
                btn.onclick=function(){
                    alert(box1.offsetParent.id);
                };
};

其输出结果为box1

offsetLeft

当前元素相对于其定位父元素的水平偏移量
比如：
body代码如下：

<div id="box1" style="position: relative;">
            <div id="box0">
                <div id='mydiv'></div>
            </div>
        </div>
<button id='btn1'>获取样式信息</button>

css样式表如下：

<style>
            #mydiv{
                padding: 10px;
                width:100px;
                height:100px;
                background-color: red ;
            }
            #box1{
                padding: 50px;
                background-color: greenyellow;
            }
</style>

js代码如下：

window.onload=function(){
                var box1=document.getElementById("mydiv");
                var btn=document.getElementById("btn1");
                btn.onclick=function(){
                    alert(box1.offsetLeft);
                };
};

输出结果为50

scrollWidth

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

scrollHeight

可以获取元素整个滚动区域的高度
比如：
html代码如下：

<div id="box4">
            <div id="box5"></div>
        </div>
<button id='btn1'>获取样式信息</button>

css样式如下：

<style>
            #box4{
                width:200px;
                height:300px;
                background-color: aqua;
                overflow: auto;
            }
            #box5{
                width:150px;
                height:600px;
                background-color: blanchedalmond;
            }
</style>

js代码如下

window.onload=function(){
                var box4=document.getElementById("box4");
                var btn=document.getElementById("btn1");
                btn.onclick=function(){
                    alert(box4.scrollHeight);
                };
};

输出结果为600

scrollLeft

可以获取水平滚动条滚动了多少距离
比如：
html如下：

<div id="box4">
            <div id="box5"></div>
        </div>
<button id='btn1'>获取样式信息</button>

css样式如下：

<style>
            #box4{
                width:200px;
                height:300px;
                background-color: aqua;
                overflow: auto;
            }
            #box5{
                width:150px;
                height:600px;
                background-color: blanchedalmond;
            }
</style>

js和css如下：

<style>
            #box4{
                width:200px;
                height:300px;
                background-color: aqua;
                overflow: auto;
            }
            #box5{
                width:250px;
                height:600px;
                background-color: blanchedalmond;
            }
</style>
        <script type="text/javascript">
            window.onload=function(){
                var box4=document.getElementById("box4");
                var btn=document.getElementById("btn1");
                btn.onclick=function(){
                    alert(box4.scrollLeft);
                };
            };
</script>

输出结果为你水平滚动的距离

scrollTop

可以获取垂直滚动条滚动了多少距离

当满足scrollHeight-scrollTop == clientHeight说明垂直滚动条滚到底了。
当满足scrollWidth-scrollLeft == clientWidth说明水平滚动条滚到底了。

onscroll滚动条滚动的事件

该事件会在元素的滚动条滚动时触发

禁用表单项

如果为表单项添加disabled=”disabled” 则表单项将变成不可用(禁用)的状态。
如果用js设置值为true，则元素禁用，反之就是可用。

测试滚动条是否到底小练习

这个练习主要就是使用onscroll滚动条滚动的事件来对元素的滚动距离以及可见高度进行运用。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #info{
                width: 300px;
                height: 500px;
                background-color: aqua;
                overflow: auto;
            }
        </style>
        <script>
            window.onload=function(){
                var ck1=document.getElementById("ck1");
                var btn1=document.getElementById("sub");
                var info=document.getElementById("info");
                info.onscroll=function(){
                    if(info.scrollHeight-info.scrollTop==info.clientHeight){
                        ck1.disabled=false;
                        btn1.disabled=false;
                    }else{
                        ck1.disabled=true;
                        btn1.disabled=true;
                    }
                };
            };
        </script>
    </head>
    <body>
        <h3>用户注册</h3>
        <p id="info">
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
            我已经仔细阅读我已经仔细阅读我已经仔细阅读
        </p>
        <!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态-->
        <input type="checkbox" id="ck1" disabled="disabled" />我已经仔细阅读
        <input type="button" id="sub" value="注册" disabled="disabled" />
    </body>
</html>
posted @   青仙  阅读(44)  评论(0)  编辑  收藏  举报
相关博文：
· js基础_66、获取元素的样式
· js基础_23、属性名和属性值
· 建议收藏： jq 获取各个元素的宽度高度的方法
· JS获取元素的大小（高度和宽度）
· JavaScript 其他样式操作的属性
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示