- Get and Set Content with textContent and innerHTML 8:00
- Change Element Attributes 5:50
- Modifying Elements 2 objectives
- Set Inline Styles with the style Property 9:38
- Create New DOM Elements 4:35
- Review Attributes and Element Creation 5 questions
- Append Nodes 4:52
- DOM Manipulation Review 3 questions
- Insert HTML at Specified Positions 3:39
- Remove Nodes 4:20
- Review Appending and Removing Nodes 5 questions
Preview
Video Player
00:00
00:00
Set Inline Styles with the style Property
9:38Like most other attributes, you can get and set the inline style of an element in the DOM with the style property. However, unlike most other attributes, the style property returns an object containing a list of CSS style properties.
You've learned that you can set inline
styles on an HTML element with the style
0:00
attribute.
0:05
The styles set in this way override those
set within an external style sheet.
0:06
In most cases, you'd style elements
directly in an external style sheet.
0:11
But there will be times when you'll use
JavaScript to modify element styles in
0:15
response to some user interaction,
for instance.
0:19
Like most other attributes,
you can get and
0:22
set the inline style of an element
in the DOM with the style property.
0:25
However, unlike most other attributes,
the style property returns an object
0:30
containing a list of all the CSS
style properties you can set.
0:35
Let's look at this in the console.
0:39
I'll type our btnUpdate variable
that's declared in app.js,
0:43
which holds a reference to
the page's update heading button.
0:46
To access its style property,
I'll type .style.
0:51
This returns a CSSStyleDeclaration
object.
0:56
Expanding it displays all the style
related properties, like background,
1:00
background color, border,
and a whole lot more.
1:05
Notice how all property names with two or
more words like backgroundColor,
1:09
backgroundImage and
borderColor are in camelCase.
1:14
This is different from how you'd write
them in CSS with dashes between each word.
1:17
JavaScript's core methods and
properties all use camelCase,
1:22
including all DOM properties,
attributes, and event handlers.
1:26
The inline CSS style declaration
properties are no different.
1:30
And it's important to remember when
working with the style property.
1:34
These properties only get or
set the element's inline styles and
1:38
do not refer to any CSS applied
from a separate CSS file.
1:43
Because of that, the CSS Style
Declaration object's properties
1:47
are generally used to set
styles versus get style values.
1:51
At the beginning of this course, you used
some of them to set the body's background
1:56
color with style.backgroundColor and the
button's text color with style.color, for
2:00
example.
2:05
Let's try a few more style
properties here in the console.
2:06
First, btnUpdate.style.borderBottom
2:11
= '5px solid deeppink' applies
2:17
a bright pink bottom border to the button.
2:22
And btnUpdate.style,
2:31
.backgroundColor =
'mediumvioletred' changes
2:36
the background color of
the button to red violet.
2:41
One common use for setting a style
with JavaScript is to hide and
2:48
unhide elements on the page.
2:52
In our project, let's set up a button
that will toggle our task list in and
2:54
out of view like this.
2:59
In index.html, there's a button
element with the class btn-toggle.
3:02
The button displays above the task list,
initially showing the text "Hide List".
3:07
Back in app.js,
let's first select the button.
3:16
I'll declare a variable named
btnToggle at the top of the file and
3:20
assign it the button element
with the class btn-toggle using
3:25
the handy document.querySelector method.
3:29
Next, to make something happen on
the page when the button gets clicked,
3:42
I'll need to add an event listener to the
button that listens for the click event.
3:47
I'll set that up here in my JavaScript
file with btnToggle.addEventListener.
3:53
I'll pass the method the string click,
followed by an arrow function.
4:01
When a user clicks the toggle button,
4:15
we'll want to hide this div
with the class list-container.
4:18
We can do that by setting the div's
CSS display property to none.
4:23
First, let's select that div
here within the function.
4:28
I'll assign it to a variable
named listContainer.
4:32
Then to hide the div,
4:53
type listContainer.style.display = 'none'.
4:57
I'll save my file,
switch back to the browser, and refresh.
5:09
Clicking the button makes the list
container disappear, great.
5:14
Clicking again, though,
does not make it reappear.
5:19
I'll need to do a little more
work with the event listener
5:22
to make our toggle button
completely functional.
5:25
When the function passed into
the event listener runs,
5:30
it should show the list if it's hidden and
hide the list if it's visible.
5:34
Notice I used the word if.
5:39
This is the perfect case
to use a conditional.
5:42
I'll start by adding if and
else statements inside this function.
5:46
First, as the if statement, I'll write
5:58
listContainer.style.display = 'block'.
6:03
Then for else,
add listContainer.style.display = 'none'.
6:12
The function will either show or
hide the list.
6:20
So what should we write as the condition
that decides which code block to run?
6:24
Well, we can check the list
container's inline display value,
6:29
which we're setting here with JavaScript.
6:32
In the condition, I'll check if
6:37
listContainer.style.display strictly
equals none.
6:41
So if display is set to none,
the function will set the list container's
6:50
display value to block,
making the list appear on the page.
6:55
Else, it will hide the list by
setting its display value to none.
7:00
Let's save our file and
have a look in the browser.
7:05
When the page first loads,
the list container does not have an inline
7:10
display property,
as you can see here in the Elements panel.
7:15
So when we first click the button,
our condition evaluates to false and
7:19
the else statement sets
the display to none.
7:24
Clicking the button again sets the display
to block, making it reappear, good.
7:27
Now when we click to hide the list,
the button text is Hide List.
7:35
The list is already hidden,
so that's confusing.
7:41
Next, let's change the button's text,
depending on whether it's hiding or
7:43
showing the list.
7:48
We can use the textContent
property to set the text.
7:49
In the if block, I'll add
btnToggle.textContent = 'Hide List'.
7:53
Then for else,
write btnToggle.textContent = 'Show List'.
8:05
Let's try it.
8:17
Good, now the button's
text changes as expected,
8:21
letting the user know what's
going to happen on click.
8:24
Finally, div elements like
the list container, by default,
8:28
display as block-level elements.
8:32
So setting an inline display of
block here seems a bit unnecessary.
8:35
So let's instead remove the inline style
attribute from the list container.
8:40
You can remove an attribute from
an element like style using
8:45
the removeAttribute() method.
8:49
In the if statement, change this line
to listContainer.removeAttribute,
8:52
followed by a set of parentheses.
8:59
The method accepts a string,
specifying the name of the attribute
9:02
to remove from the element,
in this case, the style attribute.
9:08
I'll save my file.
9:13
Back in the browser,
everything still works as expected.
9:15
But notice in the Elements panel how
the style attribute gets removed from
9:18
the div when you click
to display the list.
9:23
All right, next up, you'll learn how to
create elements and add them to the DOM.
9:30