Original subtitles

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.