Remove some CSS only if JS is supported

Question

I have 2 Divs that I would like to insert a class into ONLY if Javascript is not supported.

So consider this.. one Div has this class="no-js-left" and the other has this class="no-js-right"

What is the most simple way of detecting this and either removing these is JS is support something without using Modernizr?

Also I am using jQuery if that means anything

Isn't Modernizr a JavaScript library? How could you use it to detect that JavaScript is not supported when it won't work itself without JavaScript? You need to do it the other way around, like BoltClock's answer (with or without jQuery). — nnnnnn
– nnnnnn, Commented Dec 29, 2011 at 3:46

thirtydot · Accepted Answer · 2011-12-29 06:19:01Z

8

Without JavaScript, your markup will remain static. For this to work, you'll have to add the classes to your HTML first, and then remove those classes using JavaScript.

Since you're using jQuery, you can easily take them out with .removeClass():

$('.no-js-left, .no-js-right').removeClass('.no-js-left .no-js-right');

edited Dec 29, 2011 at 6:19

thirtydot

229k51 gold badges393 silver badges354 bronze badges

answered Dec 29, 2011 at 3:43

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Virendra Over a year ago

this will just remove the classes and not hide/remove the divs

BoltClock Over a year ago

@Virendra: That's what the question is asking.

copy · Accepted Answer · 2011-12-29 04:23:26Z

1

You should also consider using the root elements class name and different CSS selectors like this example:

<html class="js-disabled">
<head>
    <script type="text/javascript">
      document.getElementsByTagName("html")[0].className = "js-enabled";
    </script>

and

.js-enabled .something { /* ... */ }
.js-disabled .something { /* ... */ }

This solution has a couple of advantages over BoltClocks answer:

It's actually faster, because it gets evaluated at the same time as the rendering of your page
You don't depend on jQuery if you want to drop it later ;-)
I would rather have .js-disabled .something than .js-disabled-something (personal preference though)

answered Dec 29, 2011 at 4:23

copy

3,3942 gold badges31 silver badges36 bronze badges

Comments

Virendra · Accepted Answer · 2011-12-29 03:49:24Z

-1

Use the following code. If JavaScript is supported by the browser the below code will execute and hide the divs with classes no-js-left and no-js-right.

$(document).ready(function() {
    $('.no-js-left').hide();
    $('.no-js-right').hide();
});

This code will just hide the divs and not actually remove them.

If you want to delete the divs from the page use

$(document).ready(function() {
    $('.no-js-left').remove();
    $('.no-js-right').remove();
});

Update: If you want to just remove the classes then use

$(document).ready(function() {
    $('.no-js-left').removeClass('.no-js-left');
    $('.no-js-right').removeClass('.no-js-right');
});

edited Dec 29, 2011 at 3:49

answered Dec 29, 2011 at 3:44

Virendra

2,5433 gold badges23 silver badges39 bronze badges

1 Comment

nnnnnn Over a year ago

The question is about removing the classes from the divs, not removing or hiding the divs themselves.

Collectives™ on Stack Overflow

Remove some CSS only if JS is supported

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related