js元素尺寸和位置,包含clientWidth、offsetWidth、scrollWidth等

一.clientWidth和clientHeight

1.clientWidth:内容+左右内间距
即:clientWidth = width+左右padding
2.clientHeight:内容+上下内间距
即: clientHeigh = height + 上下padding

二.offsetWidth和offsetHeight

1.offsetWidth:内容+内间距+左右边框
即:offsetWidth = width + 左右padding + 左右boder
2.offsetHeight:内容+内间距+上下边框
即:offsetHeith = height + 上下padding + 上下boder

三.scrollWidth、scrollHeight、scrollTop和 scrollLeft

1.scrollWidth:可视区域宽度+被隐藏区域宽度
2.scrollHeight:可视区域高度+被隐藏区域高度
3.scrollTop :内容部分顶部到可视区域顶部的距离
4.scrollLeft:内容层左端 到 可视区域左端的距离

四.举例代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }

        .box
        {
            width: 200px;
            height: 200px;
            margin: 20px;
            padding: 50px;
            border: 10px solid palegreen;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .child
        {
            width: 200px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child">
        内容区域
    </div>
</div>
<script>
    var box = document.querySelector(".box");
    //offsetWidth:边框+内间距+内容
    console.log(box.offsetWidth);
    console.log(box.offsetHeight);
    //clientWidth:内间距+内容
    console.log(box.clientWidth);
    console.log(box.clientHeight);
    //style.width:行内样式内容区域的宽
    console.log(box.style.width);
    console.log(box.style.height);
    //scrollHeight:可视区域高度+被隐藏区域高度
    console.log(box.scrollWidth);
    console.log(box.scrollHeight);

    //当前元素相对定位的父元素的偏移距离
    console.log(box.offsetTop);
    console.log(box.offsetLeft);

    //滑动距
    console.log(box.scrollLeft);
    console.log(box.scrollTop);
    console.log(box.scrollHeight - box.clientHeight);
    box.onscroll = function () {
        console.log(this.scrollTop);
        var scTop = this.scrollTop;
        if (this.scrollHeight - box.clientHeight - scTop <= 5) {
            console.log("触底");
        }
    }
</script>
</body>
</html>

五.运行结果

在这里插入图片描述
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页