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

【问题标题】：Possible to apply some CSS only to users with Javascript disabled?可以仅将某些 CSS 应用于禁用 Javascript 的用户吗？
【发布时间】：2011-09-05 02:20:42
【问题描述】：

标题几乎说明了我想要做的事情，但为了详细说明，我想为未启用 javascript 的用户将一些 CSS 应用于名为 prochart-colitem 的类。

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

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

有什么简单的方法吗？我试过 <noscript> 和 <style> 在里面，没有运气。

【问题讨论】：

实际上，我有点惊讶 noscript 标签内的 style 标签不起作用。
推荐 Modernizer.js。您所要做的就是包含它并将类 no-script 放在 body 标记中。
同样惊讶 noscript 没有工作。我唯一能想到的是它是否在文档头部（它在正文中不起作用）。
scunliffe & g_thom - 样式元素必须在头部。一个 noscript 元素必须有一个块子元素，块元素不能出现在头部。因此，noscript 元素中的样式元素必须以某种方式无效。
RobG - 我同意它无效，我只是有点惊讶它不起作用。我刚才在 IE 8、FF 和 Chrome 中尝试了一个示例，它们显示正常。

标签： css border column-width javascript

【解决方案1】：

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

http://adapt.960.gs/

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

【讨论】：

【解决方案2】：

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

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

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

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

});

【讨论】：

【解决方案3】：

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

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

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

“nonJsClass”的 CSS 规则现在仅在用户未启用 JS 时才适用。

【讨论】：

完美，这将完全按照我的需要工作，我只是想不出这样做的逻辑。谢谢！
jQuery(function ($) { $('.nonJsClass').removeClass('nonJsClass'); });

【解决方案4】：

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

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

【讨论】：