Skip to main content

JavaScript DOM Styles — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the JavaScript DOM Styles lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Set a colour

    easy10 min

    Set the paragraph colour to red and report it back.

  2. 2

    Use a camel case name

    easy10 min

    Set the background colour and report the value back.

  3. 3

    Include the unit

    easy10 min

    Set the width to 200 pixels and report the value.

  4. 4

    Read a computed style

    easy10 min

    Report the colour the browser actually applied.

  5. 5

    Set several styles

    medium10 min

    Set the font size and padding, then report the font size.

Find the bug(5)

  1. 1

    Fix the dashed property name

    easy8 min

    A dashed CSS name is not valid in JavaScript.

  2. 2

    Fix the missing unit

    easy8 min

    A width without a unit is ignored.

  3. 3

    Fix style used to read a stylesheet value

    easy8 min

    The style property only sees inline styles.

  4. 4

    Fix the style set on a collection

    easy8 min

    querySelectorAll returns a list, which has no style property.

  5. 5

    Fix the value written without quotes

    easy8 min

    A style value must be a string.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace