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

简介:
/*=========================================
    函数功能:获取浏览器类型
=========================================*/
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文件的所有class样式
    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;
        }
    }
}
复制代码

 

复制代码
params['ywlx'] = document.body==undefined ? "" : (document.body.getAttribute("data-ywlx") || "");


<!DOCTYPE HTML>
<html ng-app="ptjyChaChe" ng-controller="ptjyChaCheController">
<body data-ywlx="ptjy"> 
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5566392.html,如需转载请自行联系原作者

相关文章
|
15天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
17 0
|
21天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
11 0
|
23天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
33 1
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
JSON 安全 JavaScript
怎么保护苹果手机移动应用程序ipa中文件安全?
怎么保护苹果手机移动应用程序ipa中文件安全?
22 1
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
40 0
|
23天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
21 2
|
2天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
8 0
|
8天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
13 0
|
16天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css