Style Methods

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 pairs like this:

{ color: '#FFFFFF', backgroundColor: '#000000', fontSize: '20px' }

There are a few important differences between the key/value pairs in the object above and the arguments from last exercise. Let’s consider these differences below:

  • The object is wrapped by an opening and closing curly brace: {}.
  • Inside the object, there are three key/value pairs. The keys in the example object are color, backgroundColor, and fontSize.
  • The values come after the colon : of each key. For instance, fontSize is a key, and its value is '20px'.
  • When referencing CSS properties in an object, the property names are camelCased — they are modified to have no quotes or spaces, and to start each new word with a capital letter. Therefore, background-color becomes backgroundColor, and 'font-size' becomes fontSize.

To set multiple properties at once, you can pass the whole object into the .css() method as a single element.

$('.example-class').css({ color: '#FFFFFF', backgroundColor: '#000000', fontSize: '20px' })

In the example above, we use the .css() method to change the color, background color, and font size values of the .example-class element.



Modify the .css() methods you wrote in the last exercise to accept one object.

On mouse enter, the object should change the 'color' to '#C3FF00', and should change the backgroundColor to '#535353'.

On mouse leave, the object should change the 'color' to '#EFEFEF', and should change the backgroundColor to '#303030'.

Folder Icon

Sign up to start coding

Already have an account?