2

我有一个页面，我希望根据是否启用 javascript 来设置不同的样式。

代码：

<link rel="stylesheet" href="./css/main.css" type="text/css" />

<noscript>
    <link rel="stylesheet" href="./css/noscript.css" type="text/css" />
</noscript>

我的问题是 noscript.css 只覆盖了一些属性，而不是全部。因此，由于 main.css 中包含更多样式，因此它也适用。只有被覆盖的样式看起来不错。如果我删除指向 main.css 的链接，页面看起来就像我想要的那样。

有没有办法将所有以前的样式“重置”为默认样式，或者在 noscript 上禁用指向 main.css 的链接？

谢谢！

4

3 回答 3

6

你可以这样做：

<script>
  document.write('<link rel="stylesheet" href="./css/main.css" type="text/css" />');
</script>
<noscript>
    <link rel="stylesheet" href="./css/noscript.css" type="text/css" />
</noscript>

我通常不是 . 的忠实粉丝document.write()，但这是一个例子，说明它是最简单的事情。您当然可以创建<link>标签并将其附加到<head>或者如果它太令人反感的话。

于 2012-06-25T21:56:10.743 回答
2

如果有人遇到这个老问题，我发现的最好方法（不需要 JS）是：

<noscript>
<!--
</noscript>
<link rel="stylesheet" href="./css/main.css" type="text/css" />
<noscript>
-->
</noscript>

所以如果你有 JS，浏览器会看到

<link rel="stylesheet" href="./css/main.css" type="text/css" />

没有JS，浏览器会看到

<!--
<link rel="stylesheet" href="./css/main.css" type="text/css" />
-->
于 2020-04-30T15:11:26.500 回答
0 
var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'etxt/css';
css.href = './css/main.css';
document.head.appendChild(css);
于 2012-06-25T22:19:19.360 回答