日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

本文帶來(lái)5個(gè)難得一見(jiàn)的JavaScriot原生API，為我們的前端開(kāi)發(fā)帶來(lái)意想不到的便利。

創(chuàng)新互聯(lián)專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、鄆城網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、鄆城網(wǎng)絡(luò)營(yíng)銷(xiāo)、鄆城企業(yè)策劃、鄆城品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供鄆城建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

1. getBoundingClientRect()

Element.getBoundingClientRect() 方法返回一個(gè) DOMRect 對(duì)象，該對(duì)象提供有關(guān)元素大小及其相對(duì)于視口的位置的信息。

domRect = element.getBoundingClientRect();

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

例如，獲取DOM元素相對(duì)于頁(yè)面左上角的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() 方法返回一個(gè) CSSStyleDeclaration 對(duì)象，其類(lèi)型與樣式屬性相同，其中包含元素的計(jì)算樣式。

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

它有兩個(gè)參數(shù)，第一個(gè)是計(jì)算樣式的元素，第二個(gè)是偽元素；如果偽元素不存在，則傳遞 null。

例子：

3. once: true

once: true 不是 API，看起來(lái)也不像。用于屬性配置，有了它，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。

例如，我們可以使用它來(lái)監(jiān)聽(tīng)用戶在打字時(shí)是否按下了尺寸切換鍵，然后根據(jù)情況給出適當(dāng)?shù)奶崾尽?/p>

5.clipboard.readText()

clipboard，我敢肯定，是一個(gè)常用的功能。

要從剪貼板中讀取文本，請(qǐng)調(diào)用 navigator.clipboard.readText() 并等待返回的 Promise 進(jìn)行解析。

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

要將文本復(fù)制到剪貼板，只需調(diào)用 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);
  }
}

總結(jié)

以上就是我今天想與你分享的5個(gè)關(guān)于JavaScript原生的API的知識(shí)內(nèi)容，希望這些內(nèi)容對(duì)你有所幫助。

網(wǎng)頁(yè)題目：五個(gè)罕見(jiàn)的JavaScript原生API
分享地址：http://www.dlmjj.cn/article/cogsepe.html