1、获取元素的尺寸

1. 直接读元素的样式

getComputedStyle(dom).width

把 dom 元素传进去，就可以直接拿到样式上的宽度或高度

这种方式拿的尺寸读取是 CSSOM树，这种尺寸不能反应界面上的尺寸，除非特殊情况最好别用

比如，设置元素的100px，

设置了padding 和 border 后尺寸是不一样的，

或者元素是弹性项目会被压缩或拉伸，100px 只是基线而已

dom.style.width

读取的不是 CSSOM 树的尺寸，是 DOM 树的尺寸，

如果元素的 style 属性上面没有写 width，写到 css 样式里面，这种方式读不出来，而且读出来也不一定是最终的情况，我们更多是使用的是下面四个

2. 几何尺寸

clientWidth

表示 content + padding，不包含 border边框 和 scroll滚动条

dom.offsetWidth

表示 content + padding + scroll + border

如果元素没有边框和滚动条，尺寸跟 client 是一样的

scrollWidth

visible + invisible 表示的不是这个元素本身的尺寸，而是元素里面那些东西的尺寸，

通常使用了滚动条后，元素里面的东西比较多，就出现了滚动条，获取的是元素内部滚动区域的高度和宽度，

如果这个元素没有滚动条，也没有边框，它的尺寸跟 client 是一样的

上面三种读取的是 Loyout Tree 布局树，布局树包含的是元素的几何信息

3. 人眼可见的尺寸

const rect = dom.getBoundingClientRect()

它是 dom 元素里面的一个方法，返回一个对象，对象里面包含一些属性 rect.width

这种方式获得到的尺寸不是 Loyout Tree 布局树了，是最后 GPU 画到屏幕上的尺寸，跟渲染主线程没有关系了，

比如应用 transform 旋转、放大变换后，最终呈现在屏幕上的尺寸，和 Loyout Tree 布局树又有差异，

如果没有变换和上面三个布局树得到的尺寸是一样的

by: 

https://www.bilibili.com/video/BV1FXs5ewEJR/

https://www.bilibili.com/video/BV1HX4y1H7hA/

2、copy 的监听和解禁

监听 copy 事件（也可以注册到 body 元素上），然后在网页中不管用哪种复制都会触发该事件

window.addEventListener("copy", (e) => {
  alert("不能复制")
});

阻止了默认行为后，现在就不能复制网页的内容了

window.addEventListener("copy", (e) => {
  e.preventDefault();
  alert("不能复制")
});

可以在剪切板里面设置一些其他内容，

比如复制后粘贴变成“不能复制，打钱”，然后还可以做一些提示

window.addEventListener("copy", (e) => {
  e.preventDefault();
  e.clipboardData.setData("text/plain", "不能复制，打钱");
  alert("不能复制")
});

如何解禁？

1. 右键检查元素

2. Elements 选项里面找到选中要复制的元素，然后选中右边的 Event Listeners，

3. 在 Event Listeners 下面列表找到 copy 事件，del 删除掉该事件即可

by: https://www.bilibili.com/video/BV1RLN3eFEfh/