如何仅在启用 javascript 时链接外部样式表

How to link external stylesheet only if javascript is enabled

本文关键字：链接 外部样式表 javascript 启用 何仅      更新时间：2023-09-26

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

谢谢！

你可以

这样做：

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

如果有人遇到这个老问题，我发现的最好的方法（不需要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" />
-->

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