Learn jQuery: Style Methods

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

Start[missing "en.views.course_landing_page.learn-jquery.course_illustration" translation]
Style Methods
Lesson 1 of 1
  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. 2

    To modify CSS properties of an element, jQuery provides a method called [...] . This method accepts an argument for a CSS property name, and a corresponding CSS value. It's syntax looks like: [...

  3. 3

    In addition to changing one property at a time, the [...] method can accept many CSS propery/value pairs at once. You must pass the [...] method a JavaScript object with a list of key/value pai...

  4. 4

    The jQuery [...] method enhances the visual possibilities by making CSS value changes over a period of time. The first argument passed to [...] is a JavaScript object of CSS property/value pa...

  5. 5

    A JavaScript file can quickly get overloaded with styles if you regularly use the [...] method to modify element styles. It's a best practice to group all of the style code in a CSS file, and use...

  6. 6

    Similar to [...] , the jQuery [...] method can remove a class from selected elements. Its syntax is similar to [...] : [...] In the example above: - [...] is called on [...] elements. -...

  7. 7

    Similar to other effects methods, you can use a toggle method instead of chaining the [...] and [...] methods together. The [...] method adds a class if an element does not already have it, ...

  8. 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...

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

Learn jQuery: Style Methods

Start[missing "en.views.course_landing_page.learn-jquery.course_illustration" translation]