问题描述:

The title pretty much says what I'm looking to do, but to elaborate a little more, I want to apply some CSS to a class called prochart-colitem for users who do not have javascript enabled.

The reason? I am using percentages for column widths to equal 100%, then using javascript to subtract 2 pixels from each div for a border that is also added.

If there's no javascript enabled, the columns + borders equal more than 100% of the parent div, and I need to subtract a couple pixels from a class to make it fit in the parent div to no-js users.

Any easy way to do this? I tried <noscript> with <style> inside of that, no luck.

网友答案:

One way to approach it is by always adding a CSS class to the elements you wish to have a specific style and then, once loaded, run some JavaScript to remove those classes from the elements with that class.

As an example (I use jQuery here for simplicity's sake but this can obviously be done without a JS library):

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

Where the 'nonJsClass' has CSS rules that will now only apply if the user doesn't have JS enabled.

网友答案:

You could add a class to the body tag, that triggers your desired CSS when JS is not enabled, then right after the body tag, remove it with JS.

Thus users with JS support won't see the effects of the special class.

网友答案:

Including a stylesheet inside a noscript tag was not possible before HTML5, but it is now (as long as you do it in the "head" of the document).

http://adapt.960.gs/

In the case of JavaScript being purposefully disabled or unavailable, stylesheet defaults can be served via , which is perfectly valid in the for HTML5.

网友答案:

scunliffe's answer is good. An alternate way would be to write a CSS style that only displays if JavaScript is enabled and only targets the div you want, using class chaining:

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

You can then use jQuery, for example, to add that additional class:

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

});
相关阅读:
Top