JavaScript & jQuery Video Tutorial

Part 6 - jQuery CSS Manipulation

The following code is from the Video.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">
   .shrink {font-size: 20px;}
   .emphasis {text-decoration: underline; color: red;}
 </style>
</head>

<body>
 <h1>Heading one</h1>
 <h1>Heading two</h1>
 <h1>Heading three</h1>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

css() margin-left

Sets the margin-left property. Example: css("margin-left", "50px") - Move the mouse over the <h1> elements to set the margin-left property.

$(document).ready(function() {
  $("h1").mouseenter(function() {
    $(this).css("margin-left", "50px");
  });
});

Try it out.

css() Incrementing margin-left property

Increments the margin-left property. Example: css("margin-left", "+=50px") - Move the mouse over the <h1> elements to increment the margin-left property.

$(document).ready(function() {
  $("h1").mouseenter(function() {
    $(this).css("margin-left", "+=50px");
  });
});

Try it out.

css() Multiple properties

Increments the margin-left property and sets the background-color property. Example: {"margin-left": "+=50px", "background-color": "red"} - Move the mouse over the <h1> elements to set the properties.

$(document).ready(function() {
  $("h1").mouseenter(function() {
    $(this).css({
      "margin-left": "+=50px",
      "background-color": "red"
    });
  });
});

Try it out.

addClass() Single class

Adds a class to an HTML element. Example: addClass("emphasis") - Click an <h1> element to add the emphasis class.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).addClass("emphasis");
  });
});

Try it out.

addClass() Multiple classes

Adds multiple classes to an HTML element. Example: addClass("emphasis shrink") - Click an <h1> element to add the emphasis and shrink classes.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).addClass("emphasis shrink");
  });
});

Try it out.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">
   .shrink {font-size: 20px;}
   .emphasis {text-decoration: underline; color: red;}
 </style>
</head>

<body>
 <h1 class="shrink emphasis">Heading one</h1>
 <h1>Heading two</h1>
 <h1>Heading three</h1>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

removeClass()

Removes all classes from the specified HTML element. Example: removeClass() - Click the first <h1> element to remove all of its classes.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).removeClass();
  });
});

Try it out.

removeClass() Single class

Removes a class from the specified HTML element. Example: removeClass("emphasis") - Click the first <h1> element to remove its emphasis class.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).removeClass("emphasis");
  });
});

Try it out.

removeClass() Multiple classes

Removes multiple classes from the specified HTML element. Example: removeClass("shrink emphasis") - Click the first <h1> element to remove its shrink and emphasis classes.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).removeClass("shrink emphasis");
  });
});

Try it out.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">
   .shrink {font-size: 20px;}
   .emphasis {text-decoration: underline; color: red;}
 </style>
</head>

<body>
 <h1 class="emphasis">Heading one</h1>
 <h1>Heading two</h1>
 <h1>Heading three</h1>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

removeClass() and addClass()

removeClass() and addClass() can be used together. Example: $(this).removeClass("emphasis").addClass("shrink"); - Click the first <h1> element to remove its emphasis class and add the shrink class.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).removeClass("emphasis").addClass("shrink");
  });
});

Try it out.

toggleClass() Single class

Alternately removes and adds a class. Example: toggleClass("emphasis") - Repeatedly click an <h1> element to toggle the emphasis class.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).toggleClass("emphasis");
  });
});

Try it out.

toggleClass() Multiple classes

Alternately removes and adds multiple classes. Example: toggleClass("shrink emphasis") - Repeatedly click an <h1> element to toggle the shrink and emphasis classes.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).toggleClass("shrink emphasis");
  });
});

Try it out.

toggleClass()

Alternately removes and adds currently used classes. Example: toggleClass() - Repeatedly click the first <h1> element to toggle its emphasis class.

$(document).ready(function() {
  $("h1").click(function() {
    $(this).toggleClass();
  });
});