JS-DOM涉及的位置大小属性

你的名字 2023-10-02 09:22 4阅读 0赞

# DOM涉及的位置属性 #

DOM元素对象和DOM鼠标事件对象都有描述对象位置的属性。

其中DOM元素对象的位置描述，其实就是定位中的水平和垂直方向偏移描述，

DOM鼠标事件对象的位置描述，其实就是鼠标事件对象产生瞬间的鼠标点所在坐标描述。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

DOM元素对象的位置属性有：offsetLeft、offsetTop，

这两个属性表示DOM元素对象距离其带有定位的父元素的偏移位置，

如果没有带有定位的父元素，则这两个属性表示DOM元素距离body元素的距离。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>位置</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            .container {
                /*position: relative;*/
                width: 500px;
                height: 500px;
                border: 10px solid black;
            }
    
            .box {
                width: 100px;
                height: 100px;
                border: 10px solid black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>
        <script>
            let box3 = document.querySelector('.box');
    
            console.log(box3.offsetLeft, box3.offsetTop);
        </script>
    </body>
    </html>

如果将container的position:relative;注释，则box的offsetLeft，offsetTop会输出10 10

如果将container的position:relative;加上，则box的offsetLeft，offsetTop会输出0 0

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

DOM鼠标事件对象的位置属性有三套，因为可以认为鼠标所处的坐标系标准有三套，分别是

相对于网页：pageX,pageY

相对于浏览器：clientX,clientY

相对于电脑屏幕：screenX,screenY

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>位置</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            div {
                position: absolute;
                left: 0;
                top: 0;
                width: 5px;
                height: 5px;
                background-color: #000;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <script>
            document.addEventListener('click', function (e) {
                drawPoint(e.pageX,e.pageY)
                console.log(e.pageX,e.pageY)
                console.log(e.clientX,e.clientY)
                console.log(e.screenX,e.screenY)
            })
    
            function drawPoint(x,y) {
                let div = document.createElement('div')
                div.style.left = x + 'px'
                div.style.top = y + 'px'
                document.body.append(div)
            }
        </script>
    </body>
    </html>

# DOM涉及的大小属性 #

这里大小属性只涉及DOM元素对象，因为DOM鼠标事件对象没有大小概念。

DOM元素的大小，其实就是DOM元素的宽度和高度。

DOM元素对象提供了offsetWidth，offsetHeight属性，来描述自身的宽度和高度。

这里offsetWidth，offsetHeight计算包含了盒子模型中的content、padding、border区。

这个是符合css3盒子模型要求的宽高计算。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

DOM元素对象还提供了clientWidth，clientHeight描述css老盒子模型的宽度，即clientWidth,clientHeight计算只包含content、padding，不包含border。

对于border大小计算，DOM元素提供了clientLeft、clientTop，分别表示盒子的左边框和上边框大小。

我感觉这里的名字设计是有歧义的，很容易让人和DOM鼠标事件对象的位置属性混淆，理解成DOM元素对象相对于浏览器的位置属性。

我认为有了offsetWidth,offsetHeight描述DOM元素对象大小就够了，如果想获取DOM元素对象的边框大小，可以使用style.borderTopWidth，style.borderLeftWidth。虽然这也不够好，因为这样获取严重依赖于DOM元素对象是否有style属性。

# 特殊的DOM位置和大小 #

网页在浏览器中是可以滚动的，即当网页宽高过大，超过了浏览器的宽高时，浏览器就会生成水平和垂直方向的滚动条，使用户可以滚动网页来查看被隐藏的部分。

同样地，一个子元素的宽高超过了父元素的宽高，父元素可以使用overflow:auto;样式属性来给自身生成滚动条。

DOM元素对象中有scrollLeft，scrollTop来描述子元素被遮盖的部分的偏移值

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>位置</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            .father {
                position: relative;
                left: 100px;
                top: 100px;
                width: 300px;
                height: 300px;
                padding: 10px;
                border: 10px solid black;
                overflow: auto;
            }
    
            .son {
                width: 400px;
                height: 400px;
                background-color: red;
    
            }
        </style>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
    </body>
    </html>

## father元素盒子模型 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

## 滚动条未滚动 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

> son元素左部，上部被隐藏0

## 滚动条向下滚动 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

> 400 - (300-(10+17)) + 10 = 157

# 滚动条向右滚动 #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

## 滚动条既向下滚动，也向右滚动 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210912002256875.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/20210912002330978.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/20210912002219213.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/20210912115358240.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/20210912115508431.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/20210912115650933.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/20210912115856151.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/20210912121448215.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/20210912121142424.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/20210912115614724.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/20210912120039692.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/20210912115631330.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/20210912120116507.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16