I promise that we're gonna start working
on the 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 the 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 said 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 we'll have to use the camelCase version,
so backgroundColor, and then a string with the value.
So here the color that I want is this one
so it's just kind of dark blue.
So indeed now the 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.
We can also set the width, dot 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 this style property.
So it's gonna work for example, for the background color,
so let's copy this one and now here we 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, now 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 passen 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'll 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 getComputerStyle.height
plus 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,
well 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.
So 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, edit 40 and 10, edit the pixel there,
so that's a bit too much,
so let's leave it like this, okay, beautiful,
so this getComputedStyle can become an 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 are called custom properties, but again,
they are 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 root
and so in JavaScript that is equivalent to the document,
so basically the document element.
So document.documentElement,
as we learned in the last video,
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 has 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.
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.
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, 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 tried 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.
Just another one that works here and that's a bit different
than you might expect is className,
so the className 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 className like this, okay,
so this is a non-standard and that's why it doesn't work.
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.
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 well, that's actually the hero, (chuckles)
so all I want is this, so yeah,
it says Beautiful minimalist logo now, alright.
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.
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 a 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 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,
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,
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've 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,
well 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 let's use this one,
so the button showModal, so the nav-link button,
which here you'll 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 you're using getAttribute simply returns
the URL as I wrote it in the HTML.
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 equals 3.0,
so again, it has to start with data, all right,
and then dash, and then whatever we want.
And what's special about this
is that now this attribute is at logo.dataset
and then dot versionNumber, and here that's dataset,
don't know where that came from.
And so here we use camelCase
while here we have the dash.
So just like property names,
we need to transform this here into camelCase,
so that's important to keep in mind.
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 and especially
when we need to store data in 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,
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 class name property,
we could also use that to set a class,
so we could do logo.className and I had said that,
well let's say to Jonas.
However, don't use this, don't use,
because this will override all the existing classes
and also it allows us to only put one class
on any element, all right, so again, only one class
and it will override whatever is already there,
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 a race.
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.