js读取样式属性

知识点:

element.clienHeight  返回元素的可见高度

element.clienWidth 返回元素的可见宽度

这些属性返回值是一个数字,是不在px的,会获取元素的宽度或高度,包括内容区和内边距,这些属性事只读的

elenent.offsetHeight返回元素的高度

element.offsetWidth 返回元素的宽度

获取元素的整个宽度和高度,包括内容区、内边距、边框

element.offsetParent 获取当前元素的定位父元素

 会获取到离当前元素最近的开启定位的祖先元祖

如果所有的祖先元素没有开启定位,则会返回body

Element.offsetLeft 返回元素相对于其定位父元素的水平偏移位置

Element.offsetTop 返回元素相对于其定位父元素的垂直偏移位置

Element.scrollHeight 返回元素的整体高度

Element.scrollLeft 返回元素左边缘的与视图之间的距离   获取水平滚动条滚动的距离

Element.scrollTop 返回元素上边距与视图之间的距离    获取垂直滚动条滚动的距离

Element.scrollWidth 返回元素真个滚动区域整体宽度

Element.scrollHeight可以获取元素整个滚动区域的高度

当满足 scrollHeight-scrollTop==clientHeight 时,说明垂直滚动条到底了

当满足 scrollWidth-scrollLeft==clientWidth 时,说明水平滚动条到底了

例子:读取div的属性

<!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: hidden; */
            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 () {
                // alert(box1.clientHeight);//返回元素的可见高度  120 包括:内容区和内边距

                // alert(box1.offsetWidth);//返回元素的宽度, 140  包括内容区、内边距、边框

                var op = box1.offsetParent; //会获取到离当前元素最近的开启定位的祖先元祖
                //如果所有的祖先元素没有开启定位,则会返回body
                //alert(op.id);

                //返回元素的水平偏移位置
                //alert(box1.offsetLeft);

                //alert(box4.clientHeight);//获得可见高度,滚动条内部高度,滚动条栈占17  283
                //alert(box4.scrollHeight);//获得滚动区域的高度  600
                //alert(box4.scrollWidth);//返回元素整体宽度  450

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


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




            };
        };
    </script>
</head>

<body>
    <button id="btn01">点我一下</button>
    <br>
    <div id="box4">
        <div id="box5">
        </div>
    </div>

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

</html>

测试图:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵俺第一专栏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值