js中offset系列、client系列、scroll系列和screen系列详解

原创

IT工作者

发布于 2022-05-12 08:22:29

69100

代码可运行

文章被收录于专栏：程序技术知识程序技术知识

运行总次数：0

代码可运行

1. offset系列

element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离，如果所有父级元素没有则默认为浏览器的body区域； element.offsetWidth: 返回元素大小，元素内容宽度 + padding值 + border值； element.offsetHeight: 返回元素大小，元素内容高度 + padding值 + border值；


<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <style>
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px solid #000;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-left: 50px;
            border: 5px solid #000;
            background-color: blue;
        }
    </style>
    <script>
        const son = document.querySelector(".son");
        console.log(son.offsetTop); // 10
        console.log(son.offsetLeft); // 60
        console.log(son.offsetWidth); // 130 width + 2 * padding + borde
        console.log(son.offsetHeight); // 130 height + 2 * padding + borde
    </script>
</body>

2. client系列

element.clientTop: 返回元素上边框的长度； element.clientLeft: 返回元素左边框的长度； element.clientWidth: 返回元素大小(宽度)，不包含边框，width + padding； element.clientHeight: 返回元素大小(高度)，不包含边框，height + padding；


<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <style>
        .father {
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px solid #000;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-left: 50px;
            border: 5px solid #000;
            background-color: blue;
        }
    </style>
    <script>
        const son = document.querySelector(".son");
        console.log(son.clientTop); // 5
        console.log(son.clientLeft); // 5
        console.log(son.clientWidth); // 120 width + 2 * padding
        console.log(son.clientHeight); // 120 height + 2 * padding
    </script>
</body>

3. scroll系列

element.scrollTop: 返回被卷去的上侧距离(页面纵向滚动，滚动条拉动的距离)；

element.scrollLeft: 返回被卷去的左侧距离(页面横向滚动，滚动条拉动的距离)；

onscroll事件: 页面滚动事件，当页面滚动的时候会监听这个事件；

<body>
    <div class="son"></div>
    <div class="son1"></div>

    <style>
        .son {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-left: 50px;
            border: 5px solid #000;
            background-color: blue;
            overflow: auto;
        }
        .son {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-left: 50px;
            border: 5px solid #000;
            background-color: blue;
            overflow: auto;
        }
    </style>
    <script>
        const son = document.querySelector(".son");
        const son1 = document.querySelector(".son1");
        son.addEventListener("scroll", () => {
            console.log(son.scrollTop);
        })
        son1.addEventListener("scroll", () => {
            console.log(son.scrollLeft);
        })
    </script>
</body>

element.scrollWidth: 返回元素大小(宽度)，不包含边框，width + padding，注意这个宽度指的是内容实际大小，内容如果超出也要算在内；

element.scrollHeight: 返回元素大小(高度)，不包含边框，height + padding，注意这个高度指的是实际大小，内容如果超出也要算在内；

代码如下：

<body>
    <div class="son">hellohellohellohellohellohellohello</div>
    <div class="son1">
        hello
        hello
        hello
        hello
        hello
        hello
        hello
        hello
        hello
        hello
        hello
        hello
        hello
        hello
    </div>

    <style>
        .son {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 5px solid #000;
            background-color: blue;
        }
        .son {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin-top: 50px;
            border: 5px solid #000;
            background-color: pink;
        }
    </style>
    <script>
        const son = document.querySelector(".son");
        const son1 = document.querySelector(".son1");
        
        console.log(son1.scrollWidth);
        console.log(son2.scrollHeight);
    </script>
</body>

4. screen系列

window.screenTop: 表示窗口相对于电脑屏幕顶部的位置；
window.screenLeft: 表示窗口相对于电脑屏幕左侧的位置；
window.screen.width: 电脑屏幕分辨率的宽；
window.screen.height: 屏幕分辨率的高。
console.log(window.screenTop);
console.log(window.screenLeft);
console.log(window.screen.width);
console.log(window.screen.height);