Question

我有一个页面，我想根据是否启用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的链接？

谢谢！

Answer 1

你可以这样做：

<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>或其他任何内容，如果它太令人反感。

Answer 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" />
-->

Answer 3

var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'etxt/css';
css.href = './css/main.css';
document.head.appendChild(css);

如果启用了javascript，如何链接外部样式表

3 个答案: