JS—全屏或退出全屏

根据屏幕浏览器高度进行判断，进入全屏或退出全屏

<style>
    .icon-fullscreen{
        margin-left: 72.5%;
    }
    .icon-exitFullscreen{
        margin-left: 71%;
    }
</style>

$('#fullscreen').css('margin-left','71%');
$(function () {
    changeClass();
});

//浏览器的窗口大小发生改变时执行
$(window).resize(function () {
    //执行代码块
    changeClass();
});

//当屏幕小于891时添加一个属性，大于的时候删除属性
function changeClass() {
    var hh = $(window).height();
    if( hh > 891 ){
        $('#fullscreen').css('margin-left','');
        $('#fullscreen').removeClass('icon-exitFullscreen').addClass('icon-fullscreen');
    } else {
        $('#fullscreen').removeClass('icon-fullscreen').addClass('icon-exitFullscreen')
    }
}

// document.onfullscreenchange = function ( event ) {
//     console.log("FULL SCREEN CHANGE")
// };
// document.documentElement.onclick = function () {
//     // requestFullscreen() 方法必须在一个事件处理器的方法体里执行，否则将会失败
//     console.log("123")
//     // document.documentElement.requestFullscreen();
// }

// var runPrefixMethod = function(element, method) {
//     var usablePrefixMethod;
//     ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
//         if (usablePrefixMethod) return;
//         if (prefix === "") {
//             // 无前缀，方法首字母小写
//             method = method.slice(0,1).toLowerCase() + method.slice(1);
//
//         }
//
//         var typePrefixMethod = typeof element[prefix + method];
//
//         if (typePrefixMethod + "" !== "undefined") {
//             if (typePrefixMethod === "function") {
//                 usablePrefixMethod = element[prefix + method]();
//             } else {
//                 usablePrefixMethod = element[prefix + method];
//             }
//         }
//     });
//     return usablePrefixMethod;
// }

来源：CSDN

作者：Zjaun

链接：https://blog.csdn.net/Zjaun/article/details/103936262

标签

prefix

margin-left