JavaScript之元素宽高及事件对象距离属性的介绍

cloudOnSkyline

已于 2022-07-04 15:13:57 修改

阅读量469

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-06-28 17:13:39 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125506067

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍元素的不同宽高及距离属性，包括clientWidth、offsetWidth等一些容易混淆的属性。

（1）元素属性

1.offsetWidth和offsetHeight

获取元素的宽高，包含边框

2.clientWidth和clientHeight

获取元素的宽高，不包含边框

3.clientTop和clientLeft

分别获取元素上边框和左边框的宽度

4.offsetTop和offsetLeft

分别获取元素距离父元素（包含未显示的区域）顶部和左侧的距离

5.scrollHeight和scrollWidth

获取元素总的宽高，包含未显示区域

6.scrollTop和scrollLeft

获取滑块向下和向左滑动的距离

（2）事件对象属性

1.offsetX和offsetY

表示鼠标距离元素（绑定事件的元素，更准确的说，是鼠标位于其上的最近元素）左侧和顶部的距离

2.screenX、screenY

表示鼠标距离电脑屏幕左侧和顶部的距离

3.clientX和clientY或x和y

表示鼠标距离可视区左侧和顶部的距离

4.pageX和pageY

表示鼠标距离整个页面左侧和顶部的距离

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            width: 500px;
            height: 700px;
            box-sizing: border-box;
            padding-top: 100px;
            background-color: skyblue;
            margin: 50px 0 0 1200px;
        }
        
        .son {
            width: 200px;
            height: 300px;
            margin-left: 50px;
            background-color: orange;
            border: 10px solid red;
            border-left-width: 15px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        console.log('父级元素的宽度(包含边框)');
        console.log(father.offsetWidth);
        console.log('父级元素的高度(包含边框)');
        console.log(father.offsetHeight);
        console.log('子级元素的宽度(包含边框)');
        console.log(son.offsetWidth);
        console.log('子级元素的高度(包含边框)');
        console.log(son.offsetHeight);
        console.log('父级元素的宽度(不包含边框)');
        console.log(father.clientWidth);
        console.log('父级元素的高度(不包含边框)');
        console.log(father.clientHeight);
        console.log('子级元素的宽度(不包含边框)');
        console.log(son.clientWidth);
        console.log('子级元素的高度(不包含边框)');
        console.log(son.clientHeight);
        console.log('子元素距离整个页面顶部的距离');
        console.log(son.offsetTop);
        console.log('子元素距离整个页面左侧的距离');
        console.log(son.offsetLeft);
        console.log('子元素上边框的宽度');
        console.log(son.clientTop);
        console.log('子元素左边框的宽度');
        console.log(son.clientLeft);
        son.addEventListener('click', function(e) {
            console.log('鼠标距离子元素左侧的距离');
            console.log(e.offsetX);
            console.log('鼠标距离子元素顶部的距离');
            console.log(e.offsetY);
            console.log('鼠标距离电脑屏幕左侧的距离');
            console.log(e.screenX);
            console.log('鼠标距离电脑屏幕顶部的距离');
            console.log(e.screenY);
            console.log('鼠标距离窗口可视区左侧的距离');
            console.log(e.x);
            console.log('鼠标距离窗口可视区顶部的距离');
            console.log(e.y);
            console.log('鼠标距离窗口可视区左侧的距离');
            console.log(e.clientX);
            console.log('鼠标距离窗口可视区顶部的距离');
            console.log(e.clientY);
            console.log('鼠标距离整个页面左侧的距离');
            console.log(e.pageX);
            console.log('鼠标距离整个页面顶部的距离');
            console.log(e.pageY);
        })
    </script>
</body>

</html>

cloudOnSkyline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之元素宽高及事件对象距离属性的介绍

本文主要介绍元素的不同宽高及距离属性，包括clientWidth、offsetWidth等一些容易混淆的属性。（1）元素属性1.offsetWidth和offsetHeight获取元素的宽高，包含边框2.clientWidth和clientHeight获取元素的宽高，不包含边框3.clientTop和clientLeft分别获取元素上边框和左边框的宽度4.offsetTop和offsetLeft分别获取元素距离整个页面（包含未显示的区域）顶部和左侧的距离（2）事件对象属性1.offsetX和offsetY表
复制链接

扫一扫