乐趣区

关于javascript:BOM之元素三大系列

jiezi

1、元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过去就是偏移量，咱们应用 offset 系列相干属性能够动静失去该元素的地位（偏移）、大小等。

  • 取得元素间隔带有定位父元素的地位
  • 取得元素本身的大小（宽度高度）

留神：返回的数值都不带单位

offset 系列采纳属性：

offset 系列属性 作用
element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop 返回元素绝对带有定位父元素上方的偏移
element.offsetLeft 返回元素绝对带有定位父元素左边框的偏移
element.offsetWidth 返回本身 包含 padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight 返回本身 包含 padding、边框、内容区的高度，返回数值不带单位 
<div class="father">
    <div class="son"></div>
</div>

CSS 款式：

.father {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
}

.son {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    padding: 10px;
    border: 2px solid red;
}
let father = document.querySelector('.father');
let son = document.querySelector('.son');

// 元素的大小
console.log(son.offsetWidth);  // 124
console.log(son.offsetHeight);  // 124

console.log(son.offsetParent);  // 返回其父元素
// 元素的偏移量
console.log(son.offsetTop);  // 0
console.log(son.offsetLeft);  // 0

1.2 offset 与 style 区别

offset style
offset 能够失去 任意样式表 中的款式值 style 只能失去 行内样式表 中的款式值
offset 系列取得的数值时 没有单位 的 style.width 取得的是 带有单位 的 <u> 字符串 </u>
offsetWidth 蕴含 padding + boder + width style.width 取得不蕴含 padding 和 border 的值
offsetWidth 等属性是 只读 属性，只能获取不能赋值 style.width 是 可读写 属性，能够获取也能够赋值
所以，咱们想要 获取元素大小地位，用 offset 更适合 所以，咱们想要 给元素更改值，则须要用 style 扭转

小案例：鼠标拖拽盒子在页面中挪动

分三步走：

  1. 增加鼠标点击事件：获取鼠标在盒子外部的地位
  2. 增加鼠标挪动事件：实时获取盒子的地位并批改盒子的地位
  3. 增加鼠标弹起事件：革除鼠标挪动事件
<div class="box">
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
var box = document.querySelector('.box');
// 鼠标一挪动就会触发事件
box.addEventListener('mousedown', function(e) {
    // 获取鼠标点击时在盒子内的地位
    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;
    // 增加点击事件
    document.addEventListener('mousemove', move)

    function move(e) {
        // 实时批改盒子的地位
        box.style.left = e.pageX - x + 'px'
        box.style.top = e.pageY - y + 'px'
    }
    // 鼠标弹起时革除鼠标挪动事件
    document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move)
    })
})

2、元素可视区 client 系列

client 翻译过去就是客户端，通过 client 系列的相干属性能够失去该元素的大小、元素的大小等

client 系列属性 作用
element.clientTop 返回元素上边框的大小
elemrnt.clientLeft 返回元素左边框的大小
element.clientWidth 返回本身包含 padding、内容区的宽度、不含边框，返回数值不带单位
element.clientHeight 返回本身包含 padding、内容区的高度、不含边框，返回数值不带单位

clientWidth 和 offsetWidth 最大的区别是：clientWidth 是不包含边框的，而 offsetWidth 是包含边框的

3、元素滚动 scroll 系列

3.1 元素 scroll 系列属性

scroll 翻译过去就是滚动的，咱们应用相干属性能够动静失去该元素的 大小、滚动间隔等

scroll 系列属性 作用
element.scrollTop 返回 被卷去的上侧间隔，返回数值不带单位
element.scrollLeft 返回 被卷去的左侧间隔，返回的数值不带单位
element.scrollWidth 返回 本身理论的宽度，不含边框，返回数值不带单位
element.scrollHeight 返回 本身理论的高度（所有内容，包含还没有先没有显示进去的），不含边框，返回数值不带单位

栗子：

<div class="box">
    如果我的刚强任性 会不小心挫伤了你 你能不能温顺揭示 我尽管心太急，更胆怯错过你 爱真的须要勇气，来面对风言风语 只有你一个眼神必定 我的爱就有意义 咱们都须要勇气 去置信会在一起 人潮拥挤我能感觉你 放在我手心里，你的真心
</div>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgb(10, 181, 248);
        overflow: auto;
        color: #fff;
    }
</style>
<script>
    let box = document.querySelector('.box');
    console.log(box.clientHeight); // 200
    console.log(box.scrollHeight); // 351    
</script>

<img src=”https://pic4.zhimg.com/80/v2-0e411ffeef0ab725de7ac7a29286764a_720w.png” alt=”img” style=”zoom:80%;” />

3.2 页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页时，会主动呈现滚动条。当滚动条向下滚动时，页面下面被暗藏掉的高度，咱们承诺称为页面被卷去的头部。滚动条杂滚动时会触发 onscroll 事件

// scroll 为滚动事件
box.addEventListener('scroll', function() {console.log(this.scrollTop);  // 拖动滚动条，打印 div 头部被卷去局部的大小
})

总结：

三大系列大小比照 作用
element.offsetWidth 返回本身包含 padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth 返回本身包含 padding、内容区的宽度，不包含边框，返回数值不带单位
element.scrollWidth 返回理论的宽度、包含padding，不包含边框，返回数值不带单位

次要用法：

  1. offset 系列常常用于获取元素地位：offsetTop、offsetLeft
  2. client 系列常常用于获取元素的大小：clientWidth、clientHeight
  3. scroll系列常常用于获取滚动间隔：scrollTop、scrollLeft
  4. 留神页面滚动的间隔通过 window.pageXOffset 取得
退出移动版