Jonas: I promise that we're gonna start working on
a project really soon, but for now,
we need another reference lecture.
So here, we're gonna learn about styles and attributes
and classes, and you will be able to keep
all of the relevant tools here in one simple lecture
so that you can reference all of them in the future.
And some of these tools we will use later in a project,
but it's impossible to create examples for all the functions
and methods that I'm gonna show you now,
but they are still important.
So let's go.
And let's actually keep working on
our cookies message banner here.
Okay.
So we're gonna start by talking about styles.
And we already set CSS styles before,
but there are still some more things to learn.
But first, let's go back to the basics.
So to set a style on an element,
we get the element, .style,
and then dot the property name.
And remember, this will have to use the camel case version.
So backgroundColor, and then a string with the value.
And so here the color that I want is this one.
So it's this kind of dark blue.
So indeed, now this style nicely got applied to our element.
And again, we didn't have to select it manually first
because we already had it stored here
in this message variable, which is this element
that we created manually, right?
We can also set the width, .width,
and remember that we have to write the CSS value
exactly as we would do in CSS.
And so we always have to include the unit.
So in this case, I'm gonna set it to a larger percentage
so that it occupies this wide gap here.
And so now it got a little bit wider.
Okay.
And remember that these styles
are actually set as inline styles.
So styles set directly here in the DOM.
So here in the style attribute of this element,
we now have the background color and the width.
Okay?
And so these again are called inline styles.
Now you might think that we are able
to also read styles using this,
so using the style property,
but let's see what's gonna happen.
So message.style, and let's say we want to get the height.
So let's see what we get.
And we get, well, basically nothing.
And that's because using the style property like this here
only works for inline styles that we set ourselves
also using the style property.
So it's gonna work, for example, for the background color.
So let's copy this one.
And now here you actually get the background color.
And again, because it is an inline style,
so a style that we set manually ourselves,
but we cannot get a style that is hidden inside of a class
or maybe that doesn't even exist.
So for example, here, yeah,
let's say we wanted to get the color.
So the color is defined in the style sheet,
but if we try to log it here, then it's nowhere to be found.
Now we can still get the styles if we really want to.
All we need to do is to use the getComputedStyle function.
So that sounds a bit weird and this is how it works.
So getComputedStyle and VS Code
already suggested here to me.
And so here we need to pass in the element.
So that's message.
And now you see we get this huge object here.
And so this contains all of the properties
with all of the values.
So this is huge.
And so in practice, what we then do is to simply
take a certain property like color from there.
And so you see this here is the color.
Or let's say we wanted the height.
And so this is the computed styles.
So you see, computed, which means that it's the real style
as it appears here on the page.
And even if we do not declare it in our CSS.
So for example, the height, we didn't define ourselves,
but the browser of course needed
to calculate the height to display it.
And so we can then get access to that value.
And so you see it's this amount of pixels.
So let's now say we wanted to increase the height
of this message banner here by 40 pixels.
So we could get this height and then simply add 40 to that.
So let's create a variable called height,
or actually let's do it directly.
Let's say message.style.height
should be equal to getComputedStyle.height + 40,
and then don't forget the unit.
So 40 pixels.
But now we're gonna run into a problem
because as you see, this value here itself comes in pixels.
So this here is a string, okay?
Or actually all of this here,
which is the same as we had before up here.
So the result of this is a string.
So here, we're trying to add a number to a string,
which of course is not gonna work
because, well, it has this pixel here.
Let me show you that nothing here happened.
But remember that we already learned about a nice function
which can essentially take the number out of this string.
So basically parse the number from here,
and that is, remember, Number.parseInt or parseFloat.
In this case, it's a floating point number.
So let's use parseFloat here actually of this value.
And then we need to specify also the number 10
in this function, remember?
And so now it actually works, all right?
So, beautiful.
It took that number here and only this number part
without the pixels, added 40,
and then added the pixel there.
So that's a bit too much.
So let's leave it like this.
Okay, beautiful.
So this getComputedStyle can become in really handy.
But now finally, let's also work with CSS custom properties,
which we usually just call CSS variables.
So what I mean here is these variables that we have here.
So all of these.
They're called custom properties,
but again, they're more like variables.
And the idea of CSS variables is of course very similar
to the idea of variables in JavaScript.
So this way, we can change the value in many places
all over our CSS files by simply changing the value here.
Now, if we can change the value here, so here in our CSS,
then we can also change it right from JavaScript.
So let's go back here, or actually let's first see
where these properties are defined.
So they're defined in the document route.
And so in JavaScript that is equivalent to the document.
So basically the document element.
All right.
So Document.documentElement
as we learned in the last video, okay?
So that is the route that we just saw in CSS
and now again style.
But now we can do setProperty, okay?
And then the name of our custom property.
So let's say we want to change our primary color.
so color-primary, and then the value
that we want to set it to.
Let's say orangered.
But of course any color value would work here.
And so you see that everywhere in our style
where we used this color, which is a nice green color,
now turned orange.
So here, here, and really all over the place.
All right.
So with this, we can easily change the style of our page
simply by setting one property.
All right.
So with custom properties, we cannot do it like this here,
but instead we need to use setProperty
and then we pass in the name of the property and the value.
And by the way, we can do the same for all properties.
So we could also use setProperty to set the color
or the background color or the width
or really whatever we want, okay?
But usually it's just easier to simply do it like this.
And that's why I always do that.
Okay, so that's it for styles.
Let's talk a little bit about attributes now.
All right, so in HTML, just to remember,
all of these are attributes.
So this source, alt, even the class and the id
are simply attributes of this element.
And so in JavaScript, we can of course access
and change these different attributes.
So let's actually select that logo that I just showed you.
And the class of that is nav__logo.
So that's two underscores.
And so now we can access some of these,
let's say default properties.
So like the alt or the source attribute.
So you see here we get the alternative text,
which is this alt and then also this source.
Now this looks a bit different than the one we have here,
but more about that in a second.
All right, so this works because on images,
they are supposed to have the alt
and the source attributes on them.
And so if we specify them in HTML,
then JavaScript will automatically create
these properties on the object, okay?
But if we add some other property that is not a standard,
then JavaScript will not automatically create
a property on the object.
So let's add, for example, designer and set it to Jonas.
Okay.
And so if we now try to read logo.designer,
that's not going to work.
So you see it's undefined.
And again that is because this is not a standard property
that is expected to be on images.
All right.
Just another one that works here
and that's a bit different than you might expect
is class name.
So the class name of this element is just this class.
And so you might think that it should be just class,
but for historical reasons,
it has to be class name, like this, okay?
So this is a non-standard
and that's why it doesn't work, okay?
At least it doesn't work like this.
But of course there is another way
of reading this value from the DOM.
It's just a little bit more difficult,
but it's not a problem.
So we can use getAttribute,
and then here we can pass in the string designer
and that indeed it returns to us Jonas.
All right.
Now, just as we can read these values for these attributes,
we can also set them.
For example, we can say logo dot the alt text
should be beautiful minimalist logo.
And so now let's check that out.
And so indeed that is the, well, that's actually the hero.
So what I want is this.
So yeah, it says beautiful minimalist logo now.
All right.
Oh, and by the way, there's also the opposite
of getAttribute, which is setAttribute.
So we can also say, for example, company,
and then set it to Bankist.
And so again, if we check it out now,
then there should be this new attribute created right here.
All right.
Now remember that I told you that the URL here,
so basically actually the source is different
than what we have in the HTML.
So this URL here of this image
is basically the absolute URL.
While what I have here,
so this one here is just the relative URL.
So relative to the folder in which
the index.html file is located.
So that's completely different.
And if we want to get just literally this URL
that we have here, then we also have
to use a getAttribute, okay?
So getAttribute and then src.
Let me actually put these together
so we can see the difference.
And of course I need to lock this to the console as well.
Okay, and so here you see the absolute version
and then here the relative.
So sometimes, we really need the relative one
and then make sure you use this one.
So getAttribute.
All right.
So sometimes that's very important to keep in mind
and so that's why I showed it to you here.
And the same is actually true
for the href attribute on links.
So where is the link?
I think down here I have a Twitter link.
So yeah, that's this one.
So let's get this class here.
So very quickly, just to show you,
because on links, this is also sometimes very important.
querySelector.
So just so you can see what I mean here.
So link.href and link.getAttribute,
and then href again.
While in this case, they're probably the same anyway.
Yeah, because both of them were already absolute anyway.
So in this case, that is not a big deal,
but for example, in one of these links here in the top,
there it might be relevant.
Okay, so let's actually try that.
So yeah, let's use this one.
So the button show model.
So the nav link button,
which here you see is simply this hash.
So let's put that here.
Oh, we're missing the dot.
And now indeed you see that
the href property is the absolute URL once again,
while using getAttribute simply returns the URL
as I wrote it in the HTML, okay?
Finally, there is also a special type
of attributes and that's data attributes.
So data.
And data attributes are a special kind of attributes
that start with the words data.
So let's add one here to our image here.
And let's say, so data-version-number="3.0" okay?
So again, it has to start with data, all right,
and then dash and then whatever we want, okay?
And what's special about this is that now
this attribute is at logo.dataset
and then .versionNumber.
And here, that's dataset.
Don't know where that came from.
Okay.
And so here we use camel case where here we have the dash.
Okay, so just like property names,
we need to transform this here into camel case.
So that's important to keep in mind, okay?
So for these special attributes,
they are always stored in the dataset object.
And indeed then down here we have that 3.0.
So we use actually data attributes quite a lot
when we work with the UI, especially when we need
to store data in the user interface.
So basically in the HTML code.
And we will see how useful that can be
throughout the rest of this project and of the course.
Finally, to finish this here, just to make it complete,
let's talk about classes.
And even though at this point we actually already know
all there is to know about classes.
So you know that there is logo.classList.add,
and I will not do anything here.
So there is add, remove, there is toggle,
and there is contains.
Okay.
So these are the four that you really need to know.
And here apparently we need to pass in something.
Maybe the empty string works, but I'm not sure.
Well apparently it doesn't.
Let's just write some name here, just c for class.
Okay.
And keep in mind that you can also add multiple classes
by passing in multiple values.
And of course here I'm just writing
completely fake class names just to make a point.
Okay.
Now just as we could read the class name here,
using the className property,
we could also use that to set a class.
So we could do logo.className
and then set that, well, let's say to jonas, okay?
However, don't use this.
Don't use, okay, because this will override
all the existing classes while these four methods here
make it really nice to work with the classes
by simply allowing us to add and remove classes
based on their names without interfering
with the classes that are already there.
Just keep in mind that this one here is really called
contains and not includes like it is called in arrays.
So I hope that this serves as a nice reference
for all these different ways of working with classes,
attributes, and styles in JavaScript.
But now in the next lecture, let's finally start
to work on our project here.