Bummer! You have been redirected as the page you requested could not be found.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

jQuery Basics

Well done!

You have completed jQuery Basics!

Sign up for Treehouse Back to Library

Changing Element Styles and Classes

3:20 with Treasure Porth

Use jQuery methods like css(), addClass() and removeClass() to change the look of DOM elements.

A list of helpful methods for getting and setting CSS-related properties of elements.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    There are two ways to affect the style of an element on a webpage with jQuery. 0:00
    Manipulating the CSS directly, or adding, or removing the class of an element. 0:04
    We've already seen a bit of the CSS method. 0:09
    It works like the other manipulation methods as a getter and a setter. 0:13
    The first parameter this method takes is a CSS rule you wanna get or change. 0:17
    If the second parameter is present, 0:22
    the CSS method will set the value of the CSS rule to whatever you pass in. 0:24
    jQuery gives you a few options for adding or removing classes from an element. 0:29
    To add a class to an element, use the addClass method with the name of the class 0:34
    you want to apply to the element. 0:38
    The removeClass method does the opposite. 0:40
    While the toggle class method toggles between adding and 0:43
    removing the class on an element. 0:46
    Let's see this in action using our list of links. 0:48
    In the app.js file, 0:51
    we'll apply a background color of light gray to every odd element. 0:52
    We can do this by calling the CSS method on the odd elements. 0:57
    Remember that this odd variable refers to this jQuery selection we made in 1:01
    the previous video, which selects all the odd elements. 1:06
    Then we can pass in the name of the style property that we want to affect, 1:12
    which is background color. 1:16
    Notice here, because this will trip you up at some point, if you were to write this 1:18
    rule directly into CSS, you'd write it with a hyphen, which is called kabob case. 1:23
    But when you're using JavaScript, you'll use camel case, which means to lowercase 1:29
    the first word, and then capitalize each new word after that. 1:34
    The second parameter is the value you want to set or change the property to. 1:39
    In our case let's change it to 'lightgrey'. 1:44
    Let's save and preview the file, 1:48
    and now you can see that every other link has a grey background. 1:50
    It's worth mentioning here that setting CSS is normally something you would just 1:55
    do in your CSS file. 1:59
    You may rarely encounter a good reason to use jQuery CSS method, however, 2:01
    it's still helpful to know that it exists, and how to use it. 2:06
    Next, in app.js, let's add some classes to our links. 2:08
    I'll delete this line because it was just for demonstration. 2:13
    For the secure links let's add a class of secure. 2:17
    This will add a little tag next to each link. 2:25
    I'll show you that in the CSS. 2:28
    I have a class called secure. 2:35
    Let's save and preview, and as you can see, 2:40
    the Safe flag appears next to every secure link. 2:43
    Now let's add the class of PDF to the PDF links. 2:47
    To do that we'll use our PDFs variable up here. 2:51
    Call addClass, And 2:59
    we'll add the class of pdf which you can see here in our CSS. 3:03
    Save and preview. 3:13
    And the Locked flag will appear next to every PDF link 3:16

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up