一、与 MutationObserver Api的区别
- MutationObserver 主要用来监听 DOM 元素的属性和节点变化的,非 DOM 样式尺寸,可查看之前一篇 blog – DOM规范 – MutationObserver接口观察DOM元素的属性和节点变化
- ResizeObserver 主要用来监听 DOM 元素的 内容区域 的尺寸变化,可以监听到 Element 的内容区域或 SVGElement 的边界框改变
二、用法
1. 构造函数,创建并返回一个 ResizeObserver 对象
const resizeObserver = new ResizeObserver(entries => {
console.log('监听到了尺寸变化了...', entries)
})
resizeObserver.observe(document.getElementById('box'))
-
resizeObserver 是返回的一个操作对象,可调用其中的方法来监听、取消监听 DOM 元素等操作。
-
observe 方法用于开始观察指定的 Element 或 SVGElement 的尺寸变化。
-
entries 参数返回是一个数组,里面包含监听的每个 DOM 元素的相关信息,其中 contentRect 包含的是变化后的 内容区域 的尺寸信息。
2. unobserve 结束观察指定的 Element 或 SVGElement
resizeObserver.unobserve(document.getElementById('box'))
3. disconnect 取消和结束目标对象上所有对 Element或 SVGElement 观察
resizeObserver.disconnect()
三、完整栗子及注意点~
-
#box1 是 标准盒模型(w3c标准),width = 内容区(content),height 同理。
-
#box2 是边框盒模型(IE盒模型),width = 内容区(content)+ 内边距(padding) + 内边框(border),height 同理。
!DOCTYPE html>
html lang="zh_CN">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>ResizeObserver 测试/title>
style>
body {
margin: 0;
}
#box1 {
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
background-color: rgb(195, 245, 175);
}
#box2 {
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
box-sizing: border-box; /** 注意,此处盒模型与 #box1 不同 */
background-color: rgb(175, 182, 245);
}
/style>
/head>
body>
button onclick="change1()">更改box1样式/button>
button onclick="change2()">更改box2样式/button>
button onclick="cancel1()">取消监听box1/button>
button onclick="cancel2()">取消监听box2/button>
button onclick="cancel()">取消所有元素/button>
div id="box1">这是一个测试盒子111~~~/div>
div id="box2">这是一个测试盒子222~~~/div>
script>
const box1 = document.getElementById('box1')
const box2 = document.getElementById('box2')
let b1width = 1
let b2width = 1
const resizeObserver = new ResizeObserver(entries => {
console.log('监听到了尺寸变化了...', entries)
})
resizeObserver.observe(box1)
resizeObserver.observe(box2)
function change1 () {
const rect = box1.getBoundingClientRect()
// box1.style.width = rect.width + 10 + 'px'
// 因 #box1 是标准盒,所以边框(border)尺寸变化不会引起内容区(content)尺寸变化,所以以下语句`不会`触发观察的回调函数事件
box1.style.border = 1 + b1width + 'px solid red'
b1width ++
}
function change2 () {
const rect = box2.getBoundingClientRect()
// box2.style.width = rect.width + 10 + 'px'
// 因 #box2 是边框盒,所以边框(border)尺寸变化会引起内容区(content)尺寸变化,所以以下语句`会`触发观察的回调函数事件
box2.style.border = 1 + b2width + 'px solid red'
b2width ++
}
function cancel1 () {
resizeObserver.unobserve(box1)
}
function cancel2 () {
resizeObserver.unobserve(box2)
}
function cancel () {
resizeObserver.disconnect()
}
/script>
/body>
/html>
打印信息
盒模型示意图
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 编码器-解码器 | 基于 Transformers 的编码器-解码器模型
基于 transformer 的编码器-解码器模型是 表征学习 和 模型架构 这两个领域多年研究成果的结晶。本文简要介绍了神经编码器-解码器模型的历史,更多背景知识,建议读者阅读由 Sebastion Ruder 撰写的这篇精彩 博文。此外,建议读者对 自注意…