标题几乎说明了我想要做什么,但为了更详细地说明,我想为没有启用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中非常有效。
.prochart-colitem.js-enabled {
/* your JS-specific styles */
}
例如,您可以使用jQuery添加额外的类:
$(document).ready(function() {
$('.prochart-colitem').addClass('js-enabled');
});