头图

BOM之元素三大系列

蝼蚁之行

1、元素偏移量 offset 系列

img

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 区别

offsetstyle
offset 可以得到任意样式表中的样式值style 只能得到行内样式表中的样式值
offset 系列获得的数值时没有单位style.width 获得的是带有单位的<u>字符串</u>
offsetWidth 包含 padding + boder + widthstyle.width 获得不包含 paddingborder 的值
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、内容区的高度、不含边框,返回数值不带单位
clientWidthoffsetWidth 最大的区别是:clientWidth 是不包括边框的,而 offsetWidth 是包括边框的

img

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 系列经常用于获取元素位置 : offsetTopoffsetLeft
  2. client 系列经常用于获取元素的大小:clientWidthclientHeight
  3. scroll系列经常用于获取滚动距离 :scrollTopscrollLeft
  4. 注意页面滚动的距离通过 window.pageXOffset 获得
阅读 1.2k

日益努力然后风声水起

13 声望
1 粉丝
0 条评论

日益努力然后风声水起

13 声望
1 粉丝
文章目录
宣传栏