JS小知识，分享5个不常用但又很重要的原生API(四)

connygpt 2024-11-08 10:32 13 浏览

大家好，今天给大家分享5个不常用但又很重要的 JavaScript 原生API，熟悉了这些，将会为我们的前端开发带来意想不到的便利。

getBoundingClientRect()

getBoundingClientRect()是JavaScript中的一个函数，它返回一个 DOMRect 矩形对象，该对象表示元素在视口中的位置。这个矩形对象包含了元素的左，上，右和下边界，以及宽度和高度。

domRect = element.getBoundingClientRect();

注意：getBoundingClientRect()是基于视口的，所以坐标是相对于当前视口的。一些浏览器的实现会四舍五入返回的数值，如果精确度要求高可以使用Math.round()解决

例如，获取DOM元素相对于页面左上角的top和left定位距离的值。

const h3 = document.querySelector("h3");
const rect = h3.getBoundingClientRect();
const topElement = document.documentElement;

const positionTop = topElement.scrollTop + rect.top;
const positionLeft = topElement.scrollLeft + rect.left;

window.getComputedStyle()

window.getComputedStyle()是JavaScript中的一个函数，它可以获取一个元素的计算后的样式。返回的是一个CSSStyleDeclaration对象，可以使用它来读取元素的样式信息。

document.defaultView.getComputedStyle(element, [pseudo-element])
//或
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" style="background-color: rgb(135, 206, 235);"></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>

once: true

once: true 不是 API，看起来也不像。用于属性配置，有了它，lodash的once就不用了。

"once: true" 是一种 JavaScript 中的事件监听器选项。

当在元素上绑定事件监听器时，可以为其传递一些配置选项。其中之一就是 "once: true"，它表示这个事件监听器只会触发一次，之后就会被自动移除。

这种方式可以避免在后续操作中重复触发已经不需要的事件监听器。

举个例子：

const button = document.querySelector('button');
button.addEventListener('click', handleClick, { once: true });

function handleClick(event) {
  console.log('Button was clicked.');
}

第一次点击按钮时，会在控制台中打印 "Button was clicked."，之后再点击按钮将不会有任何反应。

这个特性是在 DOM4 规范中引入的，并在现代浏览器中被广泛支持。

注意：在使用这种方式时，需要注意的是，一旦事件监听器被移除，就不能再次触发。如果需要多次触发，就需要重新绑定事件监听器。

getModifierState()

JavaScript 中的 getModifierState() 方法可用于检查特定的修饰键（如 Alt、Ctrl、CapsLock 或 Shift）是否当前被按下。它是 Event 对象的一个方法。

示例代码：

<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 = "Caps Lock: " + x;
    }
</script>

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);
  }
}

结束语

今天的分享就到这里，希望对你有所帮助，感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

原文：https://javascript.plainenglish.io/5-rare-native-apis-for-javascript-74fecb880203
作者：Maxwell
注：非直接翻译，有部分添加内容

jstree中文api文档

上一篇：Hoppscotch - 免费开源的轻量级 API 接口开发/测试工具，代替 Postman
下一篇：API类型和集成规范指南

JS小知识，分享5个不常用但又很重要的原生API(四)

getBoundingClientRect()

window.getComputedStyle()

once: true

getModifierState()

clipboard.readText()

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三