2023年Q2用戶偏好榜：12+256G版本成新主流
3月份的性能榜、性價(jià)比榜和好評(píng)榜之后，就要輪到2023年的第二季度偏好榜了，上半年的新機(jī)潮已經(jīng)過(guò)去，最明顯的肯定就是大內(nèi)存和存儲(chǔ)的機(jī)型了，另外部分中端機(jī)也取消了屏幕塑料支架
getBoundingClientRect()是JavaScript中的一個(gè)函數(shù)，它返回一個(gè) DOMRect 矩形對(duì)象，該對(duì)象表示元素在視口中的位置。這個(gè)矩形對(duì)象包含了元素的左，上，右和下邊界，以及寬度和高度。
domRect = element.getBoundingClientRect();
注意：getBoundingClientRect()是基于視口的，所以坐標(biāo)是相對(duì)于當(dāng)前視口的。一些瀏覽器的實(shí)現(xiàn)會(huì)四舍五入返回的數(shù)值，如果精確度要求高可以使用Math.round()解決。
例如，獲取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;window.getComputedStyle()是JavaScript中的一個(gè)函數(shù)，它可以獲取一個(gè)元素的計(jì)算后的樣式。返回的是一個(gè)CSSStyleDeclaration對(duì)象，可以使用它來(lái)讀取元素的樣式信息。
document.defaultView.getComputedStyle(element, [pseudo-element])//或window.getComputedStyle(element, [pseudo-element])它有兩個(gè)參數(shù)，第一個(gè)是計(jì)算樣式的元素，第二個(gè)是偽元素；如果偽元素不存在，則傳遞 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 不是 API，看起來(lái)也不像。用于屬性配置，有了它，lodash的once就不用了。
"once: true" 是一種 JavaScript 中的事件監(jiān)聽(tīng)器選項(xiàng)。
當(dāng)在元素上綁定事件監(jiān)聽(tīng)器時(shí)，可以為其傳遞一些配置選項(xiàng)。其中之一就是 "once: true"，它表示這個(gè)事件監(jiān)聽(tīng)器只會(huì)觸發(fā)一次，之后就會(huì)被自動(dòng)移除。
這種方式可以避免在后續(xù)操作中重復(fù)觸發(fā)已經(jīng)不需要的事件監(jiān)聽(tīng)器。
舉個(gè)例子：
const button = document.querySelector('button');button.addEventListener('click', handleClick, { once: true });function handleClick(event) { console.log('Button was clicked.');}第一次點(diǎn)擊按鈕時(shí)，會(huì)在控制臺(tái)中打印 "Button was clicked."，之后再點(diǎn)擊按鈕將不會(huì)有任何反應(yīng)。
這個(gè)特性是在 DOM4 規(guī)范中引入的，并在現(xiàn)代瀏覽器中被廣泛支持。
注意：在使用這種方式時(shí)，需要注意的是，一旦事件監(jiān)聽(tīng)器被移除，就不能再次觸發(fā)。如果需要多次觸發(fā)，就需要重新綁定事件監(jiān)聽(tīng)器。
JavaScript 中的 getModifierState() 方法可用于檢查特定的修飾鍵（如 Alt、Ctrl、CapsLock 或 Shift）是否當(dāng)前被按下。它是 Event 對(duì)象的一個(gè)方法。
示例代碼：
<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>剪貼板，我敢肯定，是一個(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); }}今天的分享就到這里，希望對(duì)你有所幫助。
本文鏈接：http://www.tebozhan.com/showinfo-26-49475-0.htmlJS小知識(shí)，分享五個(gè)不常用但又很重要的原生API
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)