Learn jQuery: Style Methods

In this course, you will how to modify elements using jQuery style methods.

Start

Key Concepts

Review core concepts you need to learn to master this subject

jQuery .css method

jQuery .css modify multiple properties

jQuery .animate

jQuery addClass

jQuery removeClass

jQuery .toggleClass

jQuery .css method

// Hovering over the '.button' element will change the 
// text color to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});

The jQuery method .css() can be used to set CSS property values. To change a single CSS property, the method takes two string arguments: the first is the desired CSS property name and the second is the new value.

If the CSS property is not already applied to the object, it will add the new property and set it to the provided value. If the property already exists for the object, it will update the existing value of the property to the new value.

jQuery .css modify multiple properties

// Hovering over the '.button' element will change the 
// text color to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});

The jQuery .css() method can be used to modify multiple CSS properties of an element. To change multiple CSS properties, the method takes a JavaScript object with key-value pairs, where the key is the desired CSS property name (written in camelCase), and the value is a string representing the new value.

In the example code block, the CSS properties color, background-color, and font-size will be modified for all <h2> tags.

jQuery .animate

// Hovering over the '.button' element will change the 
// text color to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});

The jQuery .animate() method animates the transition of CSS properties to a new state.

The .animate() method can take a JavaScript object as its first argument, and the second optional parameter can be a number (in terms of milliseconds) or certain string keywords. The property names must be in camelCase, and all the values must be strings. If no second argument is provided, the default animation time will be 400 milliseconds.

jQuery addClass

// Hovering over the '.button' element will change the 
// text color to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});

The jQuery .addClass() method adds a class to a selected element. The string argument passed into .addClass() is the name of the new class and has no period preceding it, as it is implied to be a class name.

It allows for changes to styles while keeping all style declarations in separate CSS.

jQuery removeClass

// Hovering over the '.button' element will change the 
// text color to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});

The jQuery .removeClass() method removes a class from a selected element. The string argument passed into the .removeClass() method is the name of the desired class to be removed, and has no period preceding it.

jQuery .toggleClass

// Hovering over the '.button' element will change the 
// text color to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});

The jQuery .toggleClass() method combines the effects of the .addClass() and .removeClass() methods. The string argument passed to .toggleClass() is the name of the desired class to toggle and has no period preceding it.

If the class is not currently present on the selected element(s), then .toggleClass() will add the class to it. If the class is currently present on the element(s), then .toggleClass() will remove the class from them.

Style Methods

Lesson 1 of 1

1
At this point, you likely know that jQuery can link user events to dynamic effects on a web page. One of the most powerful toolsets in jQuery allows you to edit CSS property values. With these too…
2
To modify CSS properties of an element, jQuery provides a method called .css(). This method accepts an argument for a CSS property name, and a corresponding CSS value. It’s syntax looks like: $(‘…
3
In addition to changing one property at a time, the .css() method can accept many CSS property/value pairs at once. You must pass the .css() method a JavaScript object with a list of key/value pair…
4
The jQuery .animate() method enhances the visual possibilities by making CSS value changes over a period of time. The first argument passed to .animate() is a JavaScript object of CSS property/va…
5
A JavaScript file can quickly get overloaded with styles if you regularly use the css method to modify element styles. It’s a best practice to group all of the style code in a CSS file, and use jQu…
6
Similar to .addClass(), the jQuery .removeClass() method can remove a class from selected elements. Its syntax is similar to .addClass(): $(‘.example-class’).removeClass(‘active’); In the exampl…
7
Similar to other effects methods, you can use a toggle method instead of chaining the .addClass() and .removeClass() methods together. The .toggleClass() method adds a class if an element does not…
8
jQuery can be a wizard at managing your CSS, but as with any powerful magic, it must be handled with care and consideration or you’ll end up with a giant mess! There may be instances where modifyi…