全屏显示和操作css

174 阅读1分钟
/**
 *
 * @desc 全屏显示与取消全屏
 * @html <a id="toggleFullScreen" href="javascript:;" onclick="toggleFullScreen()">全屏显示</a>
 */
function toggleFullScreen() {
    if (!document.fullscreenElement &&
        !document.mozFullScreenElement && !document.webkitFullscreenElement) {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
            document.getElementById("toggleFullScreen").innerText = "退出全屏";
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
            document.getElementById("toggleFullScreen").innerText = "退出全屏";
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            document.getElementById("toggleFullScreen").innerText = "退出全屏";
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
            document.getElementById("toggleFullScreen").innerText = "全屏显示";
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
            document.getElementById("toggleFullScreen").innerText = "全屏显示";
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
            document.getElementById("toggleFullScreen").innerText = "全屏显示";
        }
    }
};
// 监听Esc按键退出全屏事件
window.onresize = function () {
    var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
    if (isFull === undefined) {
        isFull = false;
    }
    if (!isFull) {
        if (document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen) {
            document.getElementById("toggleFullScreen").innerText = "全屏显示";
        }
    }
};

module.exports = toggleFullScreen;

操作css

 * @desc 判断元素是否有某个class
 * @param {HTMLElement} ele
 * @param {String} cls
 * @return {Boolean}
 */
function hasClass(ele, cls) {
    return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
};

/**
 *
 * @desc   为元素添加class
 * @param  {HTMLElement} ele
 * @param  {String} cls
 */
var hasClass = require('./hasClass');

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) {
        ele.className += ' ' + cls;
    };
};


/**
 *
 * @desc 为元素移除class
 * @param {HTMLElement} ele
 * @param {String} cls
 */
var hasClass = require('./hasClass');

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    };
};