window.getComputedStyle()
window.getComputedStyle()方法返回与 style 属性的类型相同，其中包含元素的计算样式；
用法如下：
document.defaultView.getComputedStyle(element, [pseudo-element])
// or
window.getComputedStyle(element, [pseudo-element])
它有两个参数，第一个是计算样式的元素，第二个是伪元素；若伪元素不存在，则传 null；
看例子就明白了：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#root {
background-color: pink;
width: 100px;
height: 200px;
}
#root::after {
content: 'Haskell';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="root" ></div>
</body>
<script>
function getStyleByAttr(node, name) {
return window.getComputedStyle(node, null)[name]
}
const node = document.getElementById('root')
// rgb(135, 206, 235)
console.log(getStyleByAttr(node, 'backgroundColor'))
// 100px
console.log(getStyleByAttr(node, 'width'))
// 200px
console.log(getStyleByAttr(node, 'height'))
// table
console.log(window.getComputedStyle(node, '::after').display)
// Haskell
console.log(window.getComputedStyle(node, '::after').content)
</script>
</html>
getBoundingClientRect()
用法如下：
domRect = element.getBoundingClientRect();
返回元素的 left, top, right, bottom, x, y, width, and height 值；
比如说要获得 DOM 元素相对于网页左上角的定位距离 top 和 left 的值：
const h3 = document.querySelector("h3");
const rect = h3.getBoundingClientRect();
const topElement = document.documentElement;
const positionTop = topElement.scrollTop + ;
const positionLeft = topElement.scrollLeft + rect.left;
once: true
once: true 可不是 API，它长得也不像 API，它是用来做属性配置的，有了它，再也不用 lodash 的once 了；
const container = document.querySelector<HTMLDivElement>('.container');
container?.addEventListener('click', () => {
console.log('I will only do it once !')
}, {
// 配置 once 后，最多调用一次
once: true
})
哇！原来 JS 就一直自带，你知道吗？
clipboard.readText()
粘贴板，想必是常见要用功能吧~
要从剪贴板读取文本，调用 navigator.clipboard.readText()并等待返回的 Promise 以进行解析：
async function getClipboardContents() {
try {
const text = await navigator.clipboard.readText();
console.log('Pasted content: ', text);
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
}
}
而要将文本复制到剪贴板，则是调用 writeText()
async function copyPageUrl() {
try {
await navigator.clipboard.writeText(location.href);
console.log('Page URL copied to clipboard');
} catch (err) {
console.error('Failed to copy: ', err);
}
}
getModifierState()
如果按下或激活指定的修改键，getModifierState() 方法会返回true。
我们可以借助它，比如监听用户输入的时候是否按大小切换键，再根据情况给出合适的提示；
<input type="text" size="40" onkeydown="myFunction(event)">
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.getModifierState("CapsLock");
document.getElementById("demo").innerHTML = "大写锁定激活: " + x;
}
</script>
ＯＫ，以上就是本篇分享，你“学废”了吗？
