Question

为了让我的网页优雅地降级，我有一些只有在相应的JavaScript能够运行时才能加载的CSS。

当且仅当浏览器启用了JavaScript时，加载本地CSS的最简单方法是什么？

这也是CSS的一大块，所以我宁愿不必写一行JavaScript来添加每个属性。（哦，如果有必要，我可以使用jQuery）。

Answer 1

在body标签“noJS”上设置一个类。然后使用Javascript删除该类。

对于在没有JS时要使用的CSS规则，只需使用.noJS .myRules {}

Answer 2

在<head>中，您可以将其与document.write()一起包含在内。我从来没有尝试过这个，但它应该在理论上起作用。没有脚本执行意味着没有加载样式表。

<head>
  <script type='text/javascript>
   document.write("<link rel='stylesheet' href='your.css' media='whatever />");
  </script>
</head>

Answer 3

查看html5 boilerplate的身体状况，了解如何使用modernizr。

然后为.no-js .addl-selector {}

编写css选择器

Answer 4

您有几个选择。

我喜欢的是将以下代码添加到body标签。

<body id="no-js"><script>document.body.id="js"</script>

然后我可以从我的主CSS中定位#no-js和#js。

另一个选项是使用JavaScript加载一个额外的样式表，但这会减慢你的初始加载速度，我试图避免这种情况。

Answer 5

我只是这样做：

document.documentElement.className = "js"

这会将类js添加到<html>标记，然后您可以使用以下命令通过css定位元素：

.js #someid{}