js读取样式属性

最新推荐文章于 2023-11-17 10:59:24 发布

喵俺第一专栏

最新推荐文章于 2023-11-17 10:59:24 发布

阅读量579

点赞数

分类专栏： # Html+css+js项目文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/dengfengling999/article/details/122645741

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

知识点：

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
评论
js读取样式属性

知识点：element.clienHeight 返回元素的可见高度element.clienWidth 返回元素的可见宽度这些属性返回值是一个数字，是不在px的，会获取元素的宽度或高度，包括内容区和内边距，这些属性事只读的elenent.offsetHeight返回元素的高度element.offsetWidth 返回元素的宽度获取元素的整个宽度和高度，包括内容区、内边距、边框element.offsetParent 获取当前元素的定位父元素会获取到离当前元素最近..
复制链接

扫一扫