Question

我想在我的html页面中添加动态css，如果浏览器是mozilla我使用导航器函数创建了一个函数，那么函数将添加mozilla css，否则它应该添加IE css但不知何故我无法使其工作。

<head>
<script type="text/javascript">   
var cs;   
function nav() {        
var txt= navigator.appCodeName;             
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>     
</head>    
<body onload="nav ()">
<p id="cab"></p>    
</body>
</html>

Answer 1

这实际上并不是实现动态css的方法。相反，你应该使用条件评论：

<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->

请参阅HERE

另见THIS回答

Answer 2

你真的应该使用conditional IE comments，而不是JavaScript。这有很多原因，包括：

当JavaScript被禁用或不可用时，CSS将起作用。
您的JavaScript处理Mozilla，但其他浏览器如Chrome和Opera呢？
您往往需要单独的CSS来“修复”IE的页面布局（特别是旧版本......），但其他主流浏览器都应该处理标准的CSS规则。

您编写的JavaScript有几个问题：

'mozilla'字符串比较永远不会匹配，因为浏览器会以大写M：'Mozilla'返回它。
链接标记中的'+ cs +'将不会执行任何操作，因为浏览器不会将其视为javascript。

如果您真的想使用JavaScript，可以从页面的head部分删除链接标记，并尝试类似这样的功能（未经测试）：

function setCss() {
    var cssFileName;

    if(navigator.appCodeName.toLowerCase() == 'mozilla') {
        cssFileName = 'mozilla-style.css';
    }
    else {
        cssFileName = 'ie-style.css';
    }

    // Create the element
    var cssFileTag = document.createElement("link")
    cssFileTag.setAttribute("rel", "stylesheet")
    cssFileTag.setAttribute("type", "text/css")
    cssFileTag.setAttribute("href", cssFileName)

    // Add it to the head section
    document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}

Answer 3

作为一种根本不需要编写脚本的替代方法，可以通过使用条件注释来检测IE或不 IE：

<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->

因此您可以通过这种方式检测IE，或者在此声明中加载“Mozilla”电子表格

<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->

您的代码中也存在一些语法问题，即行

<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />

不起作用，你不能在链接标签内输出那个变量，也不能输入text / javascript。

使用javascript添加动态css？

3 个答案: