js_判断浏览器内核与修改元素样式 - 蓝蓝设计_UI设计公司

帝皇彩票官网

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>


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



标签: js

Powered by sitemap
pk10怎么玩 状元彩票计划 帝皇彩票开奖 吉利彩票计划 奔驰彩票开奖 大象彩票登入 广西快3 海鸥娱乐系统 状元彩票平台 大象彩票计划