Web培训
400-996-5531
5个罕见的JavaScript原生API
本文带来5个难得一见的JavaScriot原生API，为我们的前端开发带来意想不到的便利。
1、getBoundingClientRect()
Element.getBoundingClientRect()方法
返回一个DOMRect对象，该对象提供有关元素大小及其相对于视口的位置的信息。
domRect=element.getBoundingClientRect();
返回左、上、右、下、x、y、宽度和高度元素的值。
例如，获取DOM元素相对于页面左上角的top和left定位距离的值。
consth3=document.querySelector("h3");
constrect=h3.getBoundingClientRect();
consttopElement=document.documentElement;
constpositionTop=topElement.scrollTop+rect.top;
constpositionLeft=topElement.scrollLeft+rect.left;
2、window.getComputedStyle()
window.getComputedStyle()方法返回一个CSSStyleDeclaration对象，其类型与样式属性相同，其中包含元素的计算样式。
document.defaultView.getComputedStyle(element,[pseudo-element])
//or
window.getComputedStyle(element,[pseudo-element])
它有两个参数，第一个是计算样式的元素，第二个是伪元素;如果伪元素不存在，则传递null。
例子：
<!DOCTYPEhtml>
<html>
<head>
<styletype="text/css">#root{background-color:pink;width:100px;height:200px;}
#root::after{content:'Haskell';display:table;clear:both;}
</style>
</head>
<body>
<divid="root"style="background-color:rgb(135,206,235);">
</div>
</body>
<script>
functiongetStyleByAttr(node,name){
returnwindow.getComputedStyle(node,null)[name]}
constnode=document.getElementById('root')
//rgb(135,206,235)
console.log(getStyleByAttr(node,'backgroundColor'))
//100pxconsole.log(getStyleByAttr(node,'width'))
//200pxconsole.log(getStyleByAttr(node,'height'))
//tableconsole.log(window.getComputedStyle(node,'::after').display)
//Haskellconsole.log(window.getComputedStyle(node,'::after').content)
</script>
</html>
3、once:true
once:true不是API，看起来也不像。用于属性配置，有了它，lodash的once就不用了。
constcontainer=document.querySelector<HTMLDivElement>('.container');
container?.addEventListener('click',()=>{console.log('Iwillonlydoitonce!')
},{
//Afterconfiguringonce,itwillbecalledatmostonceonce:true})
4、getModifierState()
如果指定的修改键被按下或激活，则getModifierState()方法返回true。
例如，我们可以使用它来监听用户在打字时是否按下了尺寸切换键，然后根据情况给出适当的提示。
<inputtype="text"size="40"onkeydown="myFunction(event)">
<pid="demo">
</p>
<script>functionmyFunction(event){
varx=event.getModifierState("CapsLock");
document.getElementById("demo").innerHTML="CapsLock:"+x;}
</script>
5、clipboard.readText()
clipboard，我敢肯定，是一个常用的功能。
要从剪贴板中读取文本，请调用navigator.clipboard.readText()并等待返回的Promise进行解析。
asyncfunctiongetClipboardContents(){
try{
consttext=awaitnavigator.clipboard.readText();
console.log('Pastedcontent:',text);
}
catch(err){
console.error('Failedtoreadclipboardcontents:',err);
}}
要将文本复制到剪贴板，只需调用writeText()。
asyncfunctioncopyPageUrl(){
try{
awaitnavigator.clipboard.writeText(location.href);
console.log('PageURLcopiedtoclipboard');
}
catch(err){
console.error('Failedtocopy:',err);
}
}
总结
以上就是我今天想与你分享的5个关于JavaScript原生的API的知识内容，希望这些内容对你有所帮助。
预约申请免费试听课
填写下面表单即可预约申请免费试听！ 怕学不会？助教全程陪读，随时解惑！担心就业？一地学习，可全国推荐就业！
下一篇：前端学习路线？
Copyright © Tedu.cn All Rights Reserved 京ICP备08000853号-56 
京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有