Lesson Tuesday

Adding and removing classes can be a helpful tool. Let's start with this HTML:

colors.html
<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/scripts.js"></script>
    <title>Colors</title>
  </head>
  <body>
    <div class="container">
      <h1>What's your favorite color?</h1>
      <p>Click a button to choose what color you'd like this page to be:</p>

      <button class="btn btn-success" id="green">Green</button>
      <button class="btn btn-warning" id="yellow">Yellow</button>
      <button class="btn btn-danger" id="red">Red</button>
    </div>
  </body>
</html>

Now, some JavaScript:

js/scripts.js
$(document).ready(function() {
  $("button#green").click(function() {
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").addClass("red-background");
  });
});

When we click the green button, for example, jQuery will add the green-background class to the <body>. Now, let's create the CSS classes to actually give the page the background color we want:

css/styles.css
.green-background {
  background-color: green;
}

.yellow-background {
  background-color: yellow;
}

.red-background {
  background-color: red;
}

And our page works! But there's a problem. If we click any one button, everything is fine. But if we then click a button of a lighter color, it won't change the background. So if we click Yellow and then Red, it works. But if we click then click Green after Red, nothing happens. We need to remove the other classes before applying the new class. Fortunately, that's easy:

js/scripts.js
$(document).ready(function() {
  $("button#green").click(function() {
    $("body").removeClass();
    $("body").addClass("green-background");
  });

  $("button#yellow").click(function() {
    $("body").removeClass();
    $("body").addClass("yellow-background");
  });

  $("button#red").click(function() {
    $("body").removeClass();
    $("body").addClass("red-background");
  });
});

And now everything works perfectly!

removeClass() without an argument removes all classes from the selected element; if you'd like to just remove a specific class, you can pass it in as an argument (or pass in multiple classes separated by spaces).

There is another way to change the CSS of an element with jQuery:

$("button#green").click(function() {
  $("body").css("background-color", "green");
});

However, this is a bad approach for real code, for two reasons. First, it's mixing our concerns. JavaScript is responsible for how the page behaves; CSS is responsible for how the page looks. Here, we've put something about how the page looks in our JavaScript. This makes it difficult for other programmers who might need to change this page in the future to know where to look for the appropriate code. Second, you lose one of the biggest powers of CSS: the ability to create a class and re-use that style across elements and pages. Here, when we've put a style in our JavaScript, it can't be re-used. So, when you want to change the style of your page, stick to adding and removing classes.

Examples


Add a CSS class to an element:

$("body").addClass("my-class");

Remove a CSS class from an element:

$("body").removeClass();