client和offset家族

最新推荐文章于 2024-09-17 11:42:54 发布

梦晨黑

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量165

点赞数 6

分类专栏： JavaScript笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/2302_80695016/article/details/141219585

版权

JavaScript笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

client使用

获取元素自身的宽高，但不包含padding和border

获取宽高

clientWidth获取元素的宽度

clientHeight获取元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 300px;
        background: blue;
    }
</style>
<body>
    <div>
    </div>
    <script>
        const div = document.querySelector('div')
        console.log(div.clientWidth);   //200px
        console.log(div.clientHeight);  //300px
    </script>
</body>
</html>

offset使用

获取宽高

获取元素自身的宽高，同时也包含padding和border

offsetWidth获取元素的宽度

offsetHeight获取元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 300px;
        background: blue;
    }
</style>
<body>
    <div>

    </div>
    <script>
        const div = document.querySelector('div')
        console.log(div.offsetWidth);   //200px
        console.log(div.offsetHeight);  //300px
    </script>
</body>
</html>

获取位置

获取元素距离自己定位父级元素的左，上距离

offsetTop获取元素距离父元素顶部的距离

offsetLeft获取元素距离父元素左边的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
    }
    div{
        width: 200px;
        height: 300px;
        margin: 200px;
        background: blue;
    }
</style>
<body>
    <div>

    </div>
    <script>
        const div = document.querySelector('div')
        console.log(div.offsetTop);   //200px
        console.log(div.offsetLeft);  //200px
    </script>
</body>
</html>