13. 零碎但好用的API

tags: [工作常用的API]
categories: 重学前端系列笔记
cover: “https://cdn.nlark.com/yuque/0/2019/jpeg/221851/1555489235300-77ec8cfd-2be0-448e-a3d3-9dead9ff2d33.jpeg“

记录一下工作中常用，但是不好归纳的 API

👇 内容速览 👇

• 获取样式表
• 获取盒子准确宽高
• 获取联网情况
• 元素可编辑
• 获取语言
• 震动
• 全屏与退出全屏

样式表

console.log(document.styleSheets)
/* 可以获取当前页面的样式表 */

获取包裹元素盒的宽高

我们常说的获取宽高，其实是获取包裹元素盒子的宽高，元素是没有宽高的，只有盒子有宽高

• getClientRects() ：返回的是一个列表，里面是包裹元素的盒的矩形区域所占的尺寸，里面的 x、y 是相对于浏览器视口来定的，是个相对的数值
• getBoundingClintRect() ：返回的是一个对象，里面同样是盒子所占据区域的尺寸

两者不同的地方在于，一个是返回列表，一个是直接返回的对象

获取联网情况

navigator.onLine（联网的时候触发）

navigator.offLine（连不上网的时候触发）

window.addEventListener('online',Function, true);
window.addEventListener('offline', Function , true);

注意: navigator.onLine 只会在机器未连接到局域网或路由器时返回 false，其他情况下均返回 true。 也就是说，机器连接上路由器后，即使这个路由器没联通网络，navigator.onLine 仍然返回 true。

元素可编辑（contenteditable）

HTML 给全局提供了可以让普通的元素可以像input输入框那种，可以输入文字

<div contenteditable="true">可编辑</div>

获取当前语言（navigator.language）

它基于系统语言设置

console.log(navigator.language) // 具体的语言值是根据系统来的

使得页面震动（window.navigator.vibrate(pattern)）

var successBool = window.navigator.vibrate(pattern);// 兼容性不是很好 
/*传递一个 0、一个空数组或者一个元素全部为 0 的数组会结束当前正在运行中的震动模式。*/

全屏以及退出全屏

document.documentElement.requestFullscreen() （全屏）

document.exitFullscreen() （退出全屏）

function fullScreenFun(){
    let self = this;
     var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled || document.msFullscreenEnabled;
    if (fullscreenEnabled) { //判断浏览器是不是支持全屏
        let de = document.documentElement;
        if(self.fullScreenInfo === '打开全屏'){
            if( de.requestFullscreen ){
                de.requestFullscreen();
            }else if( de.mozRequestFullScreen ){
                de.mozRequestFullScreen();
            }else if( de.webkitRequestFullScreen ){
                de.webkitRequestFullScreen();
            }
            self.fullScreenInfo = '退出全屏'
        } else {
            if( document.exitFullscreen ){
                document.exitFullscreen();
            }else if( document.mozCancelFullScreen ){
                document.mozCancelFullScreen();
            }else if( document.webkitCancelFullScreen ){
                document.webkitCancelFullScreen();
            }
            self.fullScreenInfo = '打开全屏'
        }
    } else {
        self.fullScreenInfo = '浏览器当前不能全屏';
    }
}