css - 可以仅将某些 CSS 应用于禁用 Javascript 的用户吗？

Question

标题几乎说明了我想要做的事情，但为了详细说明，我想将一些 CSS 应用到一个prochart-colitem为没有启用 javascript 的用户调用的类中。

原因？我使用百分比使列宽等于 100%，然后使用 javascript 从每个 div 中减去 2 个像素来添加边框。

如果没有启用 javascript，则列 + 边框等于父 div 的 100% 以上，我需要从一个类中减去几个像素以使其适合父 div 到无 js 用户。

有什么简单的方法可以做到这一点？我在里面试过<noscript>了<style>，没有运气。

score 6 · Accepted Answer

一种解决方法是始终将 CSS 类添加到您希望具有特定样式的元素中，然后在加载后运行一些 JavaScript 以从具有该类的元素中删除这些类。

作为一个例子（为了简单起见，我在这里使用jQuery，但这显然可以在没有 JS 库的情况下完成）：

$(document).ready(function()
{
  $(".nonJsClass").each(function()
  {
    $(this).removeClass("nonJsClass");
  }
}

'nonJsClass' 的 CSS 规则现在仅适用于用户未启用 JS 的情况。

score 3 · Accepted Answer

您可以向 body 标签添加一个类，当 JS 未启用时触发您想要的 CSS，然后在 body 标签之后，使用 JS 将其删除。

因此支持 JS 的用户不会看到特殊类的效果。

score 2 · Accepted Answer

在 HTML5 之前，在 noscript 标记中包含样式表是不可能的，但现在可以了（只要您在文档的“头部”中执行此操作）。

在 JavaScript 被故意禁用或不可用的情况下，样式表默认值可以通过提供，这在 HTML5 中完全有效。

score 1 · Accepted Answer

斯昆利夫的回答很好。另一种方法是编写一个 CSS 样式，该样式仅在启用 JavaScript 时显示，并且仅针对您想要的 div，使用类链接：

.prochart-colitem.js-enabled {
     /* your JS-specific styles */
}

然后，您可以使用 jQuery，例如，添加该附加类：

$(document).ready(function() {
    $('.prochart-colitem').addClass('js-enabled');

});

4 回答 4