可能仅将某些CSS应用于禁用Javascript的用户



标题几乎说明了我想要做什么,但为了更详细地说明,我想为没有启用javascript的用户将一些CSS应用到一个名为prochart-colitem的类中。

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

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

有什么简单的方法吗?我试过里面有<style><noscript>,运气不好。

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

举个例子(为了简单起见,我在这里使用jQuery,但这显然可以在没有JS库的情况下完成):

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

其中"nonJsClass"具有CSS规则,该规则现在仅在用户未启用JS时适用。

您可以在body标记中添加一个类,当JS未启用时,它会触发您想要的CSS,然后在body标记之后,用JS将其删除。

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

在HTML5之前,在noscript标记中包含样式表是不可能的,但现在可以了(只要在文档的"头部"中这样做)。

http://adapt.960.gs/

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

scunliffe的回答很好。另一种方法是编写一个CSS样式,该样式仅在启用JavaScript时显示,并且仅针对您想要的div,使用类链接:
.prochart-colitem.js-enabled {
     /* your JS-specific styles */
}

例如,您可以使用jQuery添加额外的类:

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

相关内容

  • 没有找到相关文章

最新更新