五个罕见的JavaScript原生API

本文带来5个难得一见的JavaScriot原生API，为我们的前端开发带来意想不到的便利。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站制作、外贸网站建设、郓城网络推广、小程序开发、郓城网络营销、郓城企业策划、郓城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供郓城建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

1. getBoundingClientRect()

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，该对象提供有关元素大小及其相对于视口的位置的信息。

domRect = element.getBoundingClientRect();

返回左、上、右、下、x、y、宽度和高度元素的值。

例如，获取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;

2. window.getComputedStyle() 

window.getComputedStyle() 方法返回一个 CSSStyleDeclaration 对象，其类型与样式属性相同，其中包含元素的计算样式。

document.defaultView.getComputedStyle(element, [pseudo-element])
// or
window.getComputedStyle(element, [pseudo-element])

它有两个参数，第一个是计算样式的元素，第二个是伪元素；如果伪元素不存在，则传递 null。

例子：

3. once: true

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

const container = document.querySelector('.container');


container?.addEventListener('click', () => {
  console.log('I will only do it once !')
}, {
  // After configuring once, it will be called at most once
  once: true
})

4. getModifierState()

如果指定的修改键被按下或激活，则 getModifierState() 方法返回 true。

例如，我们可以使用它来监听用户在打字时是否按下了尺寸切换键，然后根据情况给出适当的提示。

5.clipboard.readText()

clipboard，我敢肯定，是一个常用的功能。

要从剪贴板中读取文本，请调用 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);
  }
}

总结

以上就是我今天想与你分享的5个关于JavaScript原生的API的知识内容，希望这些内容对你有所帮助。

当前文章：五个罕见的JavaScript原生API
标题URL：http://www.mswzjz.com/qtweb/news16/191466.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联