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.

Style Methods
Lesson 1 of 1
  1. 1
    CSS & jQuery
    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…
    Start
  2. 2
    .css()
    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: $(‘…
    Start
  3. 3
    CSS II
    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…
    Start
  4. 4
    .animate()
    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…
    Start
  5. 5
    .addClass()
    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…
    Start
  6. 6
    .removeClass()
    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…
    Start
  7. 7
    .toggleClass()
    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…
    Start
  8. 8
    Review: Style Methods
    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…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo