自动判断浏览器类型并读取相应CSS的代码

最新推荐文章于 2021-08-03 18:11:25 发布

sightboy

最新推荐文章于 2021-08-03 18:11:25 发布

阅读量497

点赞数

文章标签：浏览器 css stylesheet microsoft browser internet

本文链接：https://blog.csdn.net/sightboy/article/details/2506490

版权

实际工作中，经常会遇到浏览器版本不同网页代码就乱七八糟的情况，虽然可以在同一个CSS文件里面做到兼容，但是对于新手来说毕竟不太方便，又花费时间。比较懒的一个解决办法就是通过JS判断浏览器的类型，并读取相应的CSS文件，这样便基本上实现了网页代码兼容多浏览器。在网上找了一些这方面的代码，整合了一下，发出来，供大家方便使用，有出错的或者不会用的可以与我联系。

HTML代码：

程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>白天的影子- www.i1981.com</title>
<link href="/css/common.css" rel="stylesheet" type="text/css" />
<link href="/css/index_ie7.css" rel="stylesheet" type="text/css" />
<link href="/css/footer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/navigator.js"></script>
</head>

<body>
<div>自动判断浏览器类型并调用相应CSS的代码</div>
</body>
</html>

navigator.js

程序代码

// JavaScript Document
var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0")
{
//alert("IE 7.0");
setActiveStyleSheet("index_ie7.css");
}
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0")
{
//alert("IE 6.0");
setActiveStyleSheet("index_ie6.css");
}else if(window.navigator.userAgent.indexOf("Firefox")>=1) {
//alert("FF");
setActiveStyleSheet("index_ff.css");
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[1].href="/css/"+title; //这里根据自己的实际情况修改("link")[1]部分为0或1或2或其他，还有，注意这里/css/部分，如果css文件放在images目录下，请改为/images/或../images/
}

sightboy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自动判断浏览器类型并读取相应CSS的代码

实际工作中，经常会遇到浏览器版本不同网页代码就乱七八糟的情况，虽然可以在同一个CSS文件里面做到兼容，但是对于新手来说毕竟不太方便，又花费时间。比较懒的一个解决办法就是通过JS判断浏览器的类型，并读取相应的CSS文件，这样便基本上实现了网页代码兼容多浏览器。在网上找了一些这方面的代码，整合了一下，发出来，供大家方便使用，有出错的或者不会用的可以与我联系。HTML代码：程序代码白天的影子-www.
复制链接

扫一扫