Javascript Disabled - Use Different stylesheet?

I have a jquery slid开发者_开发百科er that works great with a few pictures. The client would like the pictures to stack in a downward fashion when JS is turned off. The problem is I have a title for each picture that is a link to an article. The titles for each picture when JS is turned off is now only at the bottom picture.

Is there some way to style a page only when JS is turned off? So, Javascript is disabled, use this style for this section??

Use progressive enhancement instead. It is a safer approach.

1. Write HTML that works by itself
2. Write CSS to style it nicely
3. Write JavaScript and CSS to make it interactive in the way you want
   • You can add the CSS with JS by appending a new <link> element
   • You can cause CSS in the preexisting stylesheet to start applying to the elements by adding a class name to their container.

Why not use javascript to add additional CSS either by jQuery's addClass or loading up a new style or link tag?

Example using jQuery:

$('body').addClass("scriptEnabled");

CSS:

#mysection {
   color: red;
}

body.scriptEnabled #mySection {
   color: blue;
}

Other solution to adding a class to the body is to document.write the other stylesheet into the page.