js_判断浏览器内核与修改元素样式

2020-3-19    前端达人

/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); 



<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下进行测试
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>


PC端只有Chrome有Safari字段吗？为什么不需要判断其他浏览器？
其实360，QQ等浏览器的userAgent字段也会带有Safari字段，但是由于他们基于Chrome二次开发的，所有也会携带有Chrome字段。
所以「匹配规则：拥有Safari字段，并且没有Chrome字段」就可以了。


接下来是修改元素样式 





<html>
<head>
    <style>
     #a{
        width:700px;
        height:300px;
        font-size:50px;
        color:red;
        background-color:grey;
        z-index:2;
        position:absolute;
        top:1300px;
        left:200px;
        display:none;
    } 
    </style>
</head>
<body>
    <div id="a"></div>
</body>
<script type="text/javascript">
    //假设想修改display为block
    function modify(){
        //1.原生Js法
        var a= document.getElementById("a");
        a.style.display="block";
        //2.用JQuery的css方法
        var a =$("#a");
        a.css("display","block");
        //3.用JQuery的attr方法
        var a =$("#a");
        a.attr("style","display:block");
    }
</script>
</html>




这样就可以根据不同浏览器写出不同的样式适配啦



    





    


				

				


分享本文至：     
				
        « 通过JavaScript制作table表格隔行变色
              JS中数据类型转换 »
    

			

		

		
		
	




    

    
分类

    
  

  

    
日历

    

        

        
    

  

    

      

        

          

            
            
            
          

          

        

      

    

    

      
链接

      
    
                

    

    

      
blogger

      

          

                    

          
蓝蓝
          http://www.lanlanwork.com

      

    

    

      
存档