js中top、clientTop、scrollTop、offsetTop的区别文字详细说明版-前端开发

关于 js 中 top、clientTop、scrollTop、offsetTop 四个属性的区别，我们可以这样来理解：

关于 js 中 top、clientTop、scrollTop、offsetTop 四个属性的区别，我们可以这样来理解：

top

对于 Window 对象和 Frame 对象，top 属性返回当前窗口的最顶层的父级窗口，如果当前对象已经是最顶层窗口，该属性则返回这个对象本身。

对于 HTML 元素，如果元素的 position 属性值为 'static'（默认值），则 top 属性不起作用；如果 position 为 'absolute' 或 'fixed'，则 top 属性表示该元素的顶部边缘到其 offsetParent 元素（非 static 定位的父元素）顶部边缘的距离。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>top示例</title>
    <style type="text/css">
        #outer {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #inner {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <script type="text/javascript">
        // 获取 inner 的 top 值
        var inner = document.getElementById('inner');
        console.log(inner.style.top); // '50px'

        // 获取 inner 的 offsetParent 元素的 top 值
        var offsetParentTop = inner.offsetParent.offsetTop;
        console.log(offsetParentTop); // 100
    </script>
</body>
</html>

clientTop

clientTop 属性返回元素上方和左侧边框的宽度（以像素为单位）。通常情况下，元素的 clientTop 应该等于该元素的 CSS 样式表中定义的边框宽度。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>clientTop示例</title>
    <style type="text/css">
        div {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box">hello world</div>
    <script type="text/javascript">
        // 获取 box 元素的 clientTop 值
        var box = document.getElementById('box');
        console.log(box.clientTop); // 1
    </script>
</body>
</html>

scrollTop

scrollTop 属性是获取或设置一个可以滚动的元素顶部相对于其顶部的偏移。当元素内容不溢出其任何框架时，scrollTop 值为 0。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>scrollTop示例</title>
    <style type="text/css">
        #box {
            height: 200px;
            overflow: auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est nisl, imperdiet eget ipsum vel, egestas mattis magna. Fusce tempus velit mauris, luctus pharetra metus congue vel. Duis mollis dapibus nunc, vel cursus lectus molestie vel. Proin imperdiet in orci ac fringilla. Aliquam condimentum faucibus tellus, ut ultrices tellus congue a. Donec nec tortor blandit, tincidunt sapien ut, auctor nisi. Quisque tempor bibendum metus, viverra convallis ex. Vivamus velit nunc, tristique at risus vitae, lacinia iaculis lacus. Sed euismod nibh vel ipsum sodales, vitae ultricies risus dictum. Sed hendrerit consequat quam, vitae sollicitudin magna vehicula eget. Praesent eleifend mauris a risus bibendum tincidunt. Etiam dapibus, erat vel bibendum mollis, tellus libero ullamcorper sapien, sed vestibulum augue libero vel quam. Nam blandit neque in ex sagittis, sed laoreet nibh sollicitudin. In hac habitasse platea dictumst.</p>
        <p>Donec elementum sapien ultricies tellus egestas dignissim. Nullam posuere elit a elit pharetra imperdiet. Nam vulputate ultrices lectus, vehicula sagittis eros congue eget. Phasellus egestas auctor tincidunt. Praesent congue in magna ac tempor. Duis semper, lectus in aliquet faucibus, quam dui congue ex, sed convallis nisl mi non mi. Nam dapibus sem quis velit facilisis, sit amet mollis ligula sollicitudin. Nullam ornare quam malesuada ante venenatis, vitae vulputate mi consequat. Quisque efficitur, sapien non dapibus finibus, velit risus malesuada nibh, eget malesuada orci justo vel elit. Mauris mauris lectus, pretium at nisi vel, aliquet pharetra mi. Aenean molestie varius augue non dictum. Etiam feugiat at magna eu congue. Nulla eget euismod justo. Praesent ut gravida velit.</p>
        <p>Vivamus vehicula metus risus, ac suscipit lacus mattis ac. Integer eget est gravida diam ornare mollis. Sed eleifend nec sem eget aliquet. Nunc malesuada, velit in tempor dapibus, diam neque viverra orci, ac pretium quam massa eu lorem. Aliquam ornare lacus eu ex interdum ultricies. Praesent eleifend nisl felis, in luctus massa tempus eget. Sed a bibendum nibh. Vivamus dictum, odio vitae imperdiet aliquam, sem tellus bibendum urna, ac tincidunt tellus erat sit amet augue. Nullam vel sapien in quam imperdiet tincidunt. In sed eros sit amet mi maximus mattis eu ut ligula. Ut ac faucibus urna. Sed luctus varius eros sed tincidunt. Sed tristique, magna non blandit elementum, odio quam placerat nunc, a commodo neque libero nec sapien.</p>
    </div>
    <script type="text/javascript">
        var box = document.getElementById('box');

        // 获取 box 元素的 scrollTop 值
        console.log(box.scrollTop); // 0

        // 设置 box 元素的 scrollTop 值
        box.scrollTop = 100;
        console.log(box.scrollTop); // 100
    </script>
</body>
</html>

offsetTop

offsetTop 属性返回当前元素上边缘相对于其 offsetParent 元素上边缘的距离（以像素为单位）。即使该元素被滚动了，该属性也不受影响。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>offsetTop示例</title>
    <style type="text/css">
        #outer {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        #inner {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <script type="text/javascript">
        // 获取 inner 的 offsetTop 值
        var inner = document.getElementById('inner');
        console.log(inner.offsetTop); // 150
    </script>
</body>
</html>

以上就是 top、clientTop、scrollTop、offsetTop 四个属性的详细区别说明。

top

clientTop

scrollTop

offsetTop

基础教程推荐