JavaScript如何元素大小偏移量

最新推荐文章于 2024-07-11 19:36:25 发布

雀巢脆脆鲨-

最新推荐文章于 2024-07-11 19:36:25 发布

阅读量783

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_69761220/article/details/125665072

版权

本文介绍了JavaScript中offset、client和scroll系列属性在获取元素位置、大小和滚动距离时的应用。offset提供了元素相对于父元素的位置信息，offsetWidth和offsetHeight包含padding和border。client系列属性用于获取元素的可视区域大小，而scroll则用于获取滚动位置。注意窗口页面滚动距离应使用window.pageXOffset。

摘要由CSDN通过智能技术生成

1.offset 偏移量

- offset 可以得到任意样式表中的样式值

- offset 系列获得的数值是没有单位的

- offsetWidth 包含padding+border+width，属性是只读属性，只能获取不能赋值

- offsetLeft 返回相对于父元素左边框的距离,动态的。

- offsetTop 返回相对于父元素的上方

<!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;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            margin: 100px 0  0 100px;
            border: 10px solid pink;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box');
        console.log('box.offsetTop:'+box.offsetTop)// 返回的结果是100  盒子距其父元素上方