Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
The properties on the style
object represent the various CSS properties we can set. This video covers one common use for setting styles with JavaScript: hiding and unhiding elements on the page.
Following along in Safari?
There is a bug in Safari that prevents this code from running correctly. Safari won't let you declare a variable with the same name as an ID present in the DOM. Because the variable toggleList
shares the same name as the ID for the button it references on the first line, this code won't run in Safari. This behavior only happens with the const
or let
keywords, not var
.
If this is affecting you, there are a few ways to proceed:
- Use an alternative web browser, such as Google Chrome or Mozilla Firefox.
- Use the
var
keyword to declare thetoggleList
variable. Like this:
var toggleList = document.getElementById('toggleList');
- Change the name of the variable to something like
toggleListButton
. Like this:
const toggleListButton = document.getElementById('toggleList');
Don't forget to use the variable name you choose for every instance of that variable throughout the document.
You need to sign up for Treehouse in order to download course files.
Sign up