Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
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
varkeyword to declare thetoggleListvariable. 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.
As you know, you can set inline styles on
an HTML element with the style attribute.
0:00
The style set in this way override
those set with external style sheets.
0:04
Just as we saw with other attributes,
0:09
inline styles can be set on
an element with the style property.
0:11
However, unlike most other attributes,
the style property itself is an object.
0:14
The properties on the style
object represent the various CSS
0:18
properties we can set.
0:21
So let's look at this in the console.
0:23
Remember, the P variable is
available here in the console.
0:26
And it's a reference to
the description paragraph element
0:29
because it was declared earlier in app.js.
0:32
So let's have a look
at its style property.
0:35
Over in the Console, I'll type p.style and
0:37
if you open this up,
you can see all the style names.
0:41
So here's background,
border, color, and so on.
0:44
And you'll notice that none
of these styles are set.
0:49
But just looking at the paragraph,
0:52
it appears to have some
styles applied to it, right?
0:54
Well, remember, these properties only
refer to the elements in line styles.
0:57
Not any CSS rules that might be
applied from a separate CSS document.
1:01
So as a result,
you can't rely on these properties to know
1:06
how an element has been styled,
unless you set them here yourself.
1:09
The style objects properties are generally
used as setters and not getters for
1:13
this reason.
1:17
So let's try a few out, p.style.color =
1:18
'darkblue' changes the text
color to dark blue.
1:22
And p.style.backgroundColor = 'lightblue'
1:27
changes the background
color to light blue.
1:33
Now, one common use for setting
style with JavaScript is to hide and
1:38
unhide elements on the page.
1:43
So let's set up a button that will toggle
our description paragraph text field and
1:45
list in and out of view.
1:50
Switching over to index.html,
let's add a button
1:53
below the first paragraph and
give it an ID of toggle list.
1:57
And we'll make the button say, Hide list.
2:06
Then since we want to hide this paragraph
text field button and list as one unit.
2:08
Let's wrap them in a div and
give it the class list.
2:15
So now, over in app.js, let's select
the button in div, we just created.
2:34
And I'm going to put my new constants at
the top of the file to mirror where they
2:39
appear in the HTML.
2:44
The new button and
div appear above the list.
2:46
So I'm going to declare these
at the top of the file.
2:50
First, we'll say const toggleList =
2:54
document.getElementById('toggleList').
2:59
And right below const listDiv
3:09
= document.querySelector.
3:15
And then,
we're going to query the class list.
3:21
You also notice, that I'm using two
different selector methods here,
3:25
just for practice.
3:29
But in a real project,
keeping it simple is probably a good idea.
3:31
So for example,
if you've decided to use querySelector,
3:34
it might make sense to use it as often
as possible throughout your code base.
3:38
Right now, we'll need to add a click
event listener to the button.
3:43
So right below my constants say,
3:47
toggleList.addEventListener, Pass
in click and a function.
3:50
So when the toggle button is clicked,
we'll want to hide listdiv.
4:07
And we can do that by setting
its display property to none.
4:11
So in the function,
we'll type listDiv.style.display = none.
4:14
All right, so let's save this,
go back to the browser, and refresh.
4:27
And clicking the button,
we see the description paragraph and
4:33
list disappear, so great.
4:36
Clicking it again, though,
we see that they don't come back.
4:38
So we'll need to do a little more work
with the event listener to make our
4:41
toggle button completely functional.
4:44
Let's look at the code again.
4:47
So when this function runs, we want
to show the list if it's hidden and
4:49
hide the list if it's visible.
4:55
So notice, I used the word if, so this
is a perfect case to use a conditional.
4:57
So let's start by adding if and
else statements to the function.
5:02
First, I'll say if.
5:06
ListDiv.style.display = 'block'.
5:12
And then, right below, we'll say,
else listDiv.style.display = none.
5:23
So now, the function will either show or
hide the list.
5:30
So what condition should the if statement
check to decide which code block to run?
5:34
Well, let's use the div element's
display property.
5:41
Since our function here is managing
the inline display property,
5:44
we can rely on the value it returns.
5:47
So in the condition, I'll add
5:49
a listDiv.style.display
5:51
= none.
6:00
So now, if the display is none.
6:03
It will be set to block,
otherwise, it will be set to none.
6:06
And let's just add a little more here.
6:11
So first, let's change the button's
text depending on whether it's hiding or
6:13
showing the list.
6:17
We can use text content for this.
6:19
So the first in the if condition,
we'll say,
6:22
toggleList.textContent = 'Hide list'.
6:27
Then inside else,
we'll add toggleList.textContent
6:36
= 'show list', all right?
6:43
So let's save our file and
try it out in the browser.
6:47
I'll go ahead and refresh the page.
6:51
And click the button and
we can see that it works both ways now.
6:54
You can see that the button changes text
to tell the user what it does, hide list,
6:59
and show list.
7:03
But there seems to be a problem.
7:04
Notice, how the list description paragraph
is getting erased except for a colon.
7:06
That's kinda weird ,right?
7:11
Well, something is wrong
with the code we've written.
7:12
The problem is a little tricky but
can you figure out what's going on here?
7:15
Feel free to pause the video and
figure out what the problem might be.
7:19
The colon is a clue.
7:23
Now, don't worry,
if you didn't get on your own.
7:27
As I said, it was a tricky problem.
7:29
But remember,
how I said the colon was the clue?
7:31
The problem turned out to be that both of
our click event handlers, we're firing.
7:35
When we click the show and hide button.
7:40
So the second handler replaced
the list description with
7:43
what was in the text input.
7:47
So if that input was blank, which it was.
7:50
The paragraph's text content was
replaced with an empty string,
7:52
with a colon appended to it.
7:56
So in other words,
it was replaced with just a colon.
7:58
So why were both handlers firing?
8:01
Well, remember, how query selector selects
the first element it matches in the DOM?
8:04
When we added the show/hide button,
above the other button.
8:10
That became the first
button element in the DOM.
8:14
This constant of button that's
declared here on line five
8:17
is being assigned to the wrong element.
8:22
So now, that we have two buttons on the
page, this line should be more specific.
8:27
Better specificity reduces bugs but
also helps make our code more readable.
8:31
Now, since the element we want to
target has a class of description,
8:36
let's add that into the selector.
8:40
And while we're at it,
let's add the class to the input, as well.
8:44
That will make it obvious, that these
three declarations are grouped together,
8:51
just from reading the JavaScript,
all right?
8:54
So now, let's switch back to the browser,
refresh, and make sure it all works.
8:56
Great, it does.
9:03
All right, so in the next video,
9:04
we'll look at how we can create
our own elements from scratch.
9:06
You need to sign up for Treehouse in order to download course files.
Sign up