This course will be retired on January 31, 2018. We recommend "jQuery Basics" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Changing Styles1:45 with Aisha Blake
Rather than using the attr() method, we can change the styling for our elements by adding or removing a class or by setting the CSS on an element.
We did something new at the end of the last video,
manipulating the CSS associated with our images via a jQuery method.
In this video, we'll dive deeper into jQuery's CSS methods, and
use one of them to continue improving our pet adoption site.
Over in the jQuery docs, we can see the description of the CSS method.
It can be used as both a getter and the setter just like the HTML and
If we pass only one argument to the method, a string representing
a property of the matched element will get the value of the property we passed in.
If we pass the CSS method two arguments, the first should again be the name of
the property, and the second should be the value we want to set for that property.
We can also add or remove classes using jQuery.
Check out the teachers notes for
details on some more methods that can help us with this.
But, for now,
we'll use the toggle class method to have some more fun with the pet adoption site.
First, we'll select any elements with the card class.
Then we'll use the on method to attach an event handler to those selected elements.
Let's base this functionality on the click event.
Inside the callback function, we'll select the element that was clicked on, and
toggle the selected class.
Now, if we save, preview and start clicking on our card elements,
we can see that we can switch back and
forth between the selected and unselected state.
You need to sign up for Treehouse in order to download course files.Sign up