logo标签列表

如果用户启用了JavaScript，则使用一些CSS。

javascriptjqueryhtmlcss
9

为了使我的网页能够优雅地降级，我有一些CSS应该只在相应的JavaScript可用时加载。

如果浏览器启用了JavaScript，那么仅在这种情况下加载本地CSS的最简单方法是什么？

此外，这是一个相当大的CSS块，因此我不想编写JavaScript行以添加每个属性。（哦，如果必要的话，我可以使用jQuery）。

2
我不是故意吹毛求疵，但如果你的CSS依赖于JavaScript才能正确显示，那就不能真正实现样式与内容的分离。 - CassOnMars
请也查看modernizr.com网站... - binarious
也许他的意思是，这是针对只有在启用JavaScript时才会存在的元素的CSS，例如增强的UI组件。 - shanethehat
1
@d_r_w 我的确有点苛刻——CSS看起来不正确，但是当HTML被CSS样式表中存储的信息进行样式化时，它就是正确的。只要这些信息在样式表中，它们就是分离的。JS可以改变HTML的状态，在这种情况下，新的HTML应该依赖于CSS告诉它如何显示。这就是分离关注点。（所有抽象都会泄漏）。 - edeverett
如果JavaScript无法工作，我需要以不同的方式呈现页面 - 实质上是相同的内容，但以不同的方式查看它。 （我已经用一种我确定非常清晰的方式表达了这一点：P） - Jon Cox
5个回答
9
在body标签上设置一个“noJS”的类，然后使用Javascript移除该类。
对于在没有JS时想要使用的CSS规则，只需使用.noJS .myRules {}。
2
+1 我肯定会在使用 document.write() 建议之前使用这个。 - Michael Berkowski
这是我会做的方式，你可以在应该加载CSS时（页面上的第一件事）加载它，然后立即执行JavaScript（仅添加类到body的部分）。所有内容都将很好地加载。 - aepheus
谢谢，最后那个修复非常简单 :) - 尽管我添加了一个JS类，但本质上是相同的。 - Jon Cox
非常优雅。谢谢！ - Alexandre Bourlier
5
在<head>中，你可以使用document.write()来包含它。虽然我从未尝试过，但理论上应该可行。没有脚本执行意味着不加载样式表。
<head>
  <script type='text/javascript>
   document.write("<link rel='stylesheet' href='your.css' media='whatever />");
  </script>
</head>
3
你有几个选项。
我喜欢的一个是将以下代码添加到body标签中。
<body id="no-js"><script>document.body.id="js"</script>

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

另一个选项是使用JavaScript加载额外的样式表，但这会减慢您的初始加载速度，我尽量避免使用它。

2
1
我只是这样做：
document.documentElement.className = "js"

这会给 <html> 标签添加类名为 js，然后你可以使用 CSS 来选择目标元素：
.js #someid{}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接