js 获取手机浏览器类型，修改css文件的class的值

Posted 2020-07-22 672530440

/*=========================================
    函数功能：获取浏览器类型
=========================================*/
function getBrowser()
{
    var type = "pc"
    var ua = navigator.userAgent.toLowerCase();
    /*
    Navigator 是html DOM中的内置对象，它包含有关浏览器的信息。userAgent是Navigator 的属性方法，可返回由客户机发送服务器的 user-agent 头部的值。作用其实就是返回当前用户所使用的是什么浏览器，*/

    if(ua.indexOf(‘android‘) > -1)
    {
        type = "android"

        var start_index = ua.indexOf(‘android‘);

        var version = ua.substring(start_index, start_index + 12);

        version = version.replace("/", " ");

        // 低于 android 4.4 版本
        if(version < "android 4.4")
        {
            params.lowVersion = true;

            updateClass("common.css", ".modal-dialog", function(cssRule){
                cssRule.style.top = "2%";
                cssRule.style.marginTop = "0px";
            });
            /*
            .modal-dialog
                {
                  top: 45%;
                  left: 50%;
                  width: 300px;
                  height: 500px;
                  position: absolute;
                  margin: -120px 0px 0px -150px;
                }
            */
        }

    }
    else if(ua.indexOf(‘iphone‘) > -1 || ua.indexOf(‘ipad‘) > -1)
    {
        type = "ios";
    }

    return type;
}

/**
 * 修改文件样式
 * @param fileName  文件名称
 * @param className 样式名称
 * @param method    回调函数, 在回调函数内修改样式
 */
function updateClass(fileName, className, method)
{
    var styleSheet = null, cssRule = null;
    //document.styleSheets:获取页面的所有css样式<link rel="stylesheet" type="text/css" href="../../../css/common.css">
    for(var i = 0, len = document.styleSheets.length; i < len; i++) {
        if(document.styleSheets[i].href != null && document.styleSheets[i].href.indexOf(fileName) >= 0)
        {
            styleSheet = document.styleSheets[i];
            break;
        }
    }

    if(styleSheet == null)
    {
        return;
    }
//styleSheet.cssRules获取common.css文件的所有样式
    for(var i = 0, len = styleSheet.cssRules.length; i < len; i++)
    {
        if(styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.indexOf(className) >=0 )
        {
            cssRule = styleSheet.cssRules[i];
            /*cssRule为：
            .modal-dialog
                {
                  top: 45%;
                  left: 50%;
                  width: 300px;
                  height: 500px;
                  position: absolute;
                  margin: -120px 0px 0px -150px;
                }
            */
            method(cssRule);
            return;
        }
    }
}