Preview

Start a free Courses trial
to watch this video

Styling Elements

9:09 with Guil Hernandez and Joel Kraft

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.

Teacher's Notes
Video Transcript
Downloads

MDN page for style property

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 the toggleList 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.

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.

JavaScript and the DOM (Retiring)

Styling Elements

Following along in Safari?