A few videos ago I introduced this concept of selecting elements and then manipulating them.
So we select an H1 or all image tags and then we can change the color or animate them or make them do
something when you click on them.
So far we've only covered the selecting half and this video.
We're going to introduce a few of the many ways to manipulate elements once we've selected them.
So here are the four main things I want to talk about.
The first one is how do we change an element style.
How do we make it blue or make it hide.
Change the font size.
Next up we'll talk about adding and removing classes with javascript and then changing the content of
a tag.
So how do I change the text inside of an H-1 tag for instance.
And then lastly changing attributes.
So how do we change the source on an image tag or the ref on an AA tag.
We're going to get started by talking about the style property.
So when the DOM is constructed and an individual node is made or an object is made for every single
element there is a property called style and the style property is a huge object hundreds of properties
one for every single CSSA property that we could set.
So we can write javascript that will then go style and element differently.
So here I'm selecting an element by its Id highlight so select it save it to a variable called tag and
then manipulating it.
And what I'm doing I'm setting.
Tag dot style dot color to be blue tag dot style dot border equals 10 pixels solid red.
It's important to note that the right side must be a string.
So even though in C Ss we don't need to put quotes around blue or around 70 P x.
This isn't C Ss.
This is javascript.
So we still have to follow the regular javascript rules.
So I have a simple web page set up that I'm going to use to demonstrate some of these properties.
So this web page is super simple just one H-1 a paragraph instead of that paragraph.
There's a strong tag and then two images of two adorable corgi mixes.
So what I'm going to do is go to the Consul and I need to start by selecting something and I'm going
to change the color and the border of this H-1.
So I need to select it and there's multiple ways to do that in a new document that queries selector
H-1.
And then I'm going to show you H-1 style which is a giant object tons and tons of properties.
So I'm going to try changing one of them like H-1 style dark color and make that yellow.
And you could see it immediately changed to yellow.
Same thing with border H-1 that style that border equals let's do five pixels solid pink.
And there we go.
So of course if we just wanted this to be yellow with a pink border.
From the time the page loaded there's no reason to use javascript to do that.
We just put it in our CSSA file we would use javascript if we wanted it turned yellow and have a pink
border when the user has been on the page for five seconds or if he wanted it to happen when the user
scrolled to a specific part of the page or in the user clicked on something.
It's all about making things interactive and we'll see how to do that shortly.
Well the nice thing about using the style property is that if you find yourself manipulating a bunch
of files on an individual element like I'm doing here and changing five different properties on this
one tag there's definitely a better way.
And there's a few reasons that there's a better way.
The first one is that this is not very dry code.
There's a lot of repeated tagged out style tagged style.
More importantly though there is this concept called the separation of concerns.
So the separation of concerns is this concept that our H M L R C S s not javascript.
Are each responsible for their own little domain and we don't want it.
We don't want a lot of crossover between them.
So in this diagram you can see that there's a little bit of crossover between each team with which is
the structure and javascript which is that behavior and then see assess is presentation.
And there's a little overlap with H html javascript but remember that it used to be before C Ss came
along you had to write your styles individually in every single element where we actually use the style
attribute.
In that case our presentation the styling was actually woven into the structure and with C Ss we now
have separated them out.
So our HMO is pure structure and then our success is pure style.
So what javascript fits in is that it should control the behavior of a page and sometimes that means
changing how things look but rather than just changing the properties inside the javascript actually
doing the styling in the javascript.
What we can do is turn them on and off inside of the CSSA file.
So one of the patterns that's really common is that we define a CSSA class like highlight and that highlight
class will have five or six or however many different properties that we're changing.
And then we can then select an element with javascript and give it that highlight class.
So in Javascript with one line we can add a class that will then change five different properties.
Let's take a look at how this would be implemented in Javascript.
So rather than selecting a tag and then changing style but color to be blue and then styled up border
to be 10 pixel solid red what we could do instead is to find a class in that class could be called anything
.
Usually you want it to be somewhat meaningful so reflecting what the class is supposed to do.
Is it something that's being highlighted or is it a correct answer.
A high score for whatever reason that you're applying the class trying come up with a good name.
So this is not a good name but some class some class is changing the color to be blue and border 10
pixel solid red.
Then all I have to do is select my tag and then tag dot class list dot add some class and that will
give my tag with the idea of highlight a new class called some class in all of these styles will be
applied.
There's a few other things we can do with class list.
So in this example I show three methods add which we already saw which is how we can add a class remove
which takes a class name and it removes that class name from the class list and then class list toggle
which is extremely useful.
It takes a class name.
And if the given element has that class already it will then remove it if the element doesn't have that
class then I will turn it on.
So very very useful.
We'll use it all the time later on.
So let me demonstrate that to you before I go back to my example here.
I'm actually going to define a new class.
So rather than making a new style sheet and using a link I'm just going to use a style tag just for
the sake of time.
So I'm going to define a class you're just going to call it big.
And what I'm going to do is change the font size to be 100 pixels and change the color to be orange
.
And then lastly let's give it a border of five pixel solid red.
So I'll leave it at that.
If I refresh my page nothing changes of course but when I want to do is apply that class to something
.
So I'm going to make this paragraph have the big class to do that I need to select it so far.
Paragraph equals document that query selector paragraph.
OK.
And let's just start by taking a look at class list and you can see that it's empty.
There are no classes assigned to this paragraph yet.
So if I want to assign one all I need to do is say P-Dub class list dot add and I want to add the class
big.
And there we go.
So it automatically reflects the new changes from my style sheet.
All I had to do is add the big class.
So hopefully you can see that this is a lot easier and that we're separating the responsibilities.
So all that are javascript does is it turns on or off a specific part of the SS rather than actually
manually manipulating individual properties.
We're now just changing things as little as possible instead of our Javascript.
So if I want to remove it all I need to do is do class classless not remove big and my favorite one
which I mentioned is super useful is toggle.
So if I hit toggle right now and hit enter there is no class assigned so it will assign it the class
big.
Now big is already assigned so it will remove it.
So this is useful obviously not in this case to make this crazy orange in huge font class but what we
might do is on something like a to do list if we want the user to be able to click on it to do.
And that will cross it out.
But they can click again and then it will uncross out or just go back to normal.
That would be done.
Or we could do it by toggling a class so we could have a class called done and I click applied click
again.
It's removed.
That's just one example of when you might use toggle.
But it's really really useful.
The last point I'll bring up about class list is that it's technically not an array.
So that means that we have to use an ad in order to add a class.
We can't do something like push.
So just a minor note but it's important to know that it's not technically an array.
So we covered two different ways of manipulating style through our javascript.
The first one is doing it manually one property at a time which is it's honestly fine if you're just
doing one or two things.
But if you're doing it in a batch or you're doing it to multiple elements it's much better more conventional
better style to use a class and just turn the class on or off