Loading...
墨滴

CYF

2021/04/26  阅读:99  主题:默认主题

BOM之元素三大系列

BOM之元素三大系列
BOM之元素三大系列

1、元素偏移量 offset 系列

img
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 {
    width200px;
    height200px;
    background-color: pink;
    position: absolute;
}

.son {
    width100px;
    height100px;
    background-color: skyblue;
    padding10px;
    border2px 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 获得的是带有单位字符串
offsetWidth 包含 padding + boder + width style.width 获得不包含 paddingborder 的值
offsetWidth 等属性是只读属性,只能获取不能赋值 style.width可读写属性,可以获取也可以赋值
所以,我们想要获取元素大小位置,用 offset 更合适 所以,我们想要给元素更改值,则需要用 style 改变

小案例:鼠标拖拽盒子在页面中移动

分三步走:

  1. 添加鼠标点击事件:获取鼠标在盒子内部的位置
  2. 添加鼠标移动事件:实时获取盒子的位置并修改盒子的位置
  3. 添加鼠标弹起事件:清除鼠标移动事件
<div class="box">
<style>
    .box {
        width200px;
        height200px;
        background-color: pink;
        position: absolute;
        top0;
        left0;
    }
</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
img

3、元素滚动 scroll 系列

3.1 元素scroll系列属性

scroll 翻译过来就是滚动的,我们使用相关属性可以动态得到该元素的 大小、滚动距离等

scroll系列属性 作用
element.scrollTop 返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离,返回的数值不带单位
element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight 返回自身实际的高度(所有内容,包括还没有先没有显示出来的),不含边框,返回数值不带单位

栗子:

<div class="box">
    如果我的坚强任性 会不小心伤害了你 你能不能温柔提醒 我虽然心太急,更害怕错过你 爱真的需要勇气,来面对流言蜚语 只要你一个眼神肯定 我的爱就有意义 我们都需要勇气 去相信会在一起 人潮拥挤我能感觉你 放在我手心里,你的真心
</div>
<style>
    .box {
        width200px;
        height200px;
        background-colorrgb(10181248);
        overflow: auto;
        color#fff;
    }
</style>
<script>
 let box = document.querySelector('.box');
    console.log(box.clientHeight); // 200
    console.log(box.scrollHeight); // 351    
</script>
img

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 获得

CYF

2021/04/26  阅读:99  主题:默认主题

作者介绍

CYF