Paulund
CSS

Use Different CSS When Javascript Is Enabled

Here is a snippet that allows you to have different CSS for when Javascript is turned on or off. You may need different CSS so you can deal with visitors who have Javascript turned off, you may want to display things differently.

To change how you display different CSS for when Javascript is on you can add a CSS class to the html tag so you can filter the CSS down to the child tags.

Javascript

Here is a raw Javascript way to add a CSS class if Javascript is turned on. 

document.documentElement.className = "js";

This will change the HTML tag to

<html class="js">

jQuery

If you use jQuery then you can just use the following which will do the same thing.

$(document).ready(function(){
     $("html").addClass("js");
});

Change The CSS

Now you have a CSS class on the HTML tag you can change the child elements.

.slides { display:block; }
.js .slides { display:none; }

This will change the slides element to hidden if Javascript is turned on which means you can add the functionality of the slideshow with the Javascript.

Back to top

Join Paulund

  • Access 100s of premium tutorials and downloadable content
  • Members content consists of premium WordPress plugins
  • CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • No ads
  • First month free!

Try it now for free!