思路:
1, 先引入公共基础样式;
2, 通过 Windows.navigator.userAgent 获取浏览器标志;
3, 通过 indexOf 进行指定浏览器的标志查找;
4, 若查找的结果不为 - 1 就引入相应的 CSS.
具体代码如下:
- <!DOCTYPE html>
- <HTML>
- <head>
- <title>
- JS 判断各种浏览器, 根据判断动态引入不同的 CSS 文件, JS 文件
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="css/base.css" />
- </head>
- <body>
- <div id="scroll-bar">
- </div>
- <script type="text/javascript">
- function getBrowser() {
- var ua = Windows.navigator.userAgent;
- var isIE = Windows.ActiveXObject != undefined && ua.indexOf("MSIE") != -1;
- var isFirefox = ua.indexOf("Firefox") != -1;
- var isOpera = Windows.opr != undefined;
- var isChrome = ua.indexOf("Chrome") && Windows.Chrome;
- var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1;
- if (isIE) {
- return "IE";
- } else if (isFirefox) {
- return "Firefox";
- } else if (isOpera) {
- return "Opera";
- } else if (isChrome) {
- return "Chrome";
- } else if (isSafari) {
- return "Safari";
- } else {
- return "Unkown";
- }
- }
- var linkNode = document.createElement("link"),
- scriptNode = document.createElement("script");
- linkNode.setAttribute("rel", "stylesheet");
- linkNode.setAttribute("type", "text/css");
- scriptNode.setAttribute("type", "text/javascript");
- if (getBrowser() == "IE") {
- linkNode.setAttribute("href", "css/index-ie.css");
- scriptNode.setAttribute("src", "js/index-ie.js");
- } else if (getBrowser() == "Firefox") {
- linkNode.setAttribute("href", "css/index-firefox.css");
- scriptNode.setAttribute("src", "js/index-firefox.js");
- } else if (getBrowser() == "Opera") {
- linkNode.setAttribute("href", "css/index-opera.css");
- scriptNode.setAttribute("src", "js/index-opera.js");
- } else if (getBrowser() == "Chrome") {
- linkNode.setAttribute("href", "css/index-chrome.css");
- scriptNode.setAttribute("src", "js/index-chrome.js");
- } else if (getBrowser() == "Safari") {
- linkNode.setAttribute("href", "css/index-safari.css");
- scriptNode.setAttribute("src", "js/index-safari.js");
- }
- document.head.appendChild(linkNode);
- document.head.appendChild(scriptNode);
- document.getElementById("scroll-bar").innerHTML = "您的浏览器是:" + getBrowser();
- </script>
- </body>
- </HTML>
以下是目录截图:
推荐: CSS 手册 https://www.html.cn/book/css/
来源: http://www.css88.com/qa/css3/14202.html