DOM元素尺寸和位置

程序员文章站 2022-06-15 13:56:13

...

DOM元素尺寸和位置

获取元素CSS大小
通过style内联获取元素的大小

var box = document.getElementById('box'); //获取元素
box.style.width; //200px、空
box.style.height; //200px、空

注解：style获取只能获取到行内style属性的CSS样式中的宽和高，如果有获取；如果没有则返回空。

获取元素实际大小clientWidth和clientHeight

这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。

box.clientWidth; //200
box.clientHeight; //200

代码案例

    <style>
        #hello {
            border: 30px solid red;
            width: 100px;
            height: 100px;
            padding: 60px;
            overflow: scroll;
        }
    </style>
</head>
 
<body>
    <div id="hello">
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
        <h1>biaoti</h1>
    </div>
    <script>
        var helloDom = document.getElementById("hello");
        console.log(helloDom.clientWidth);
        console.log(helloDom.clientHeight);
        // console.log(helloDom.style.width);
        // console.log(helloDom.style.height);
    </script> 
</body>

控制台：

注解：对于元素的实际大小，clientWidth和clientHeight理解方式如下：
1.增加边框，无变化，为200；
2.增加外边距，无变化，为200；
3.增加滚动条，最终值等于原本大小减去滚动条的大小，为184；
4.增加内边距，最终值等于原本大小加上内边距的大小，为220；

注解：如果说没有设置任何CSS的宽和高度，那么非IE浏览器会算上滚动条和内边距的计算后的大小，而IE浏览器则返回0。
注意：可视区域的大小。

scrollWidth和scrollHeight

这组属性可以获取滚动内容的元素大小。
box.scrollWidth; //200
box.scrollHeight; //200

注解：返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度。
注解：对于元素的实际大小，scrollWidth和scrollHeight理解如下:
注意：主要以chrome浏览器为基准！
滚动内容元素的大小：
scrollHeight：内边距+内容元素的大小；
scrollWidth：
没有超过父容器内容的大小，（可能减去滚动条的宽度）；
超过父容器内容的大小，左内边距+内容大小；
增加外边据，无变化。

代码如下：

Document

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    #hello {
        border: 30px solid red;
        width: 600px;
        height: 600px;
        padding: 60px;
        overflow: auto;
    }

    .hello-child {
        border: 6px solid #000;
        height: 1000px;
        /* width: 100%; */
        width: 800px;
    }
</style>

<script>
    var helloDom = document.getElementById("hello");
    var childHelloDom = document.getElementById("child-hello-id");
    console.log(helloDom.scrollWidth);
    console.log(helloDom.scrollHeight);
</script>

offsetWidth和offsetHeight

这组属性可以返回元素实际大小，包含边框、内边距和滚动条。
box.offsetWidth; //200
box.offsetHeight; //200

注解：返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度。
注解：对于元素的实际大小，offsetWidth和offsetHeight理解如下：
1.增加边框，最终值会等于原本大小加上边框大小，为220；
2.增加内边距，最终值会等于原本大小加上内边距大小，为220；
3.增加外边据，无变化；
4.增加滚动条，无变化，不会减小；

clientLeft和clientTop

这组属性可以获取元素设置了左边框和上边框的大小。
box.clientLeft; //获取左边框的长度
box.clientTop; //获取上边框的长度

offsetLeft和offsetTop

计算方式：（position:relative | absolute）
1、如果没有设置相对定位，那么元素都是以浏览器可视区域（窗口）为父容器，数值=元素的外边距；
2、如果设置了相对定位（relative | absolute），那么元素以父容器为相对定位，数值=元素的外边距；
代码如下：

Document

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .contianer {
        background: #ccc;
        /* padding-top: 0px; */
        /*外边距塌陷的问题，解决方案如下*/
        /* border-top: 1px solid #ccc; */
        overflow: hidden;
        border: 10px solid #000;
        /* top: 160px;
        left: 160px;
        position: absolute; */
        position: relative;
        margin: 60px;
    }

    #hello {
        border: 30px solid red;
        width: 300px;
        height: 300px;
        padding: 60px;
        overflow: auto;
        margin: 100px;
    }

    .hello-child {
        border: 6px solid #000;
        height: 1000px;
        /* width: 100%; */
        width: 400px;
    }
</style>

<div class="contianer">
    <div id="hello">
        <div class="hello-child" id="child-hello-id"></div>
    </div>
</div>

<script>
    var helloDom = document.getElementById("hello");
    var childHelloDom = document.getElementById("child-hello-id");
    console.log(helloDom.offsetLeft);
    console.log(helloDom.offsetTop);
</script>

scrollTop和scrollLeft

scrollTop和scrollLeft：可以获取和设置数值。

代码如下：

Document

<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .contianer {
        background: #ccc;
        /* padding-top: 0px; */
        /*外边距塌陷的问题，解决方案如下*/
        /* border-top: 1px solid #ccc; */
        overflow: auto;
        border: 10px solid #000;
        overflow: auto;
        /* top: 160px;
        left: 160px;
        position: absolute; */
        position: relative;
        margin: 60px;
        height: 500px;
    }

    #hello {
        border: 30px solid red;
        width: 300px;
        height: 300px;
        padding: 60px;
        overflow: auto;
        margin: 600px;
    }

    .hello-child {
        border: 6px solid #000;
        height: 1000px;
        /* width: 100%; */
        width: 400px;
    }
</style>

<div class="contianer" id="containerId">
    <div id="hello">
        <div class="hello-child" id="child-hello-id"></div>
    </div>
</div>

<script>
    var containerIdDom = document.getElementById("containerId");
    var helloDom = document.getElementById("hello");
    var childHelloDom = document.getElementById("child-hello-id");
    console.log(containerIdDom.scrollLeft);
    console.log(containerIdDom.scrollTop);
    setInterval(function () {
        containerIdDom.scrollTop += 1;
        console.log(containerIdDom.scrollTop);
    }, 10);
    console.log(helloDom.scrollLeft);
    console.log(helloDom.scrollTop);
</script>

相关标签： dom dom元素的尺寸和位置

上一篇： Springboot整合Active消息队列

下一篇：深度学习-基于python的理论与实践-基础篇

DOM元素尺寸和位置