CSS styles in JavaScript (setting and getting) - Beau teaches JavaScript

"WEBVTTKind: captionsLanguage: enafter selecting a dom element you can set and get the css styles of that element so here's the html here and the html is being rendered down here and you can see that we have an id of line for this paragraph tag and we have an id of attribute here for this paragraph tag here we have an inline style making this bold and if you look up this at the css we've also added this css here so we've created the body and made the font size 30 pixels i'm just going to close this css here you can see for the javascript we've already selected two things so in the line variable we've got element by id line that's this first one the first paragraph tag then we get element by id attribute that's the the second paragraph tag here so i want to change the css style of the line so look we have line dot style dot color so line refers to this variable right here that get element by id line then you put style because we're changing the style and then we want to change the color style and we're going to set that to red so if i run that you'll see now we have red text you can also change this to background and we're going to make the background red there are a lot of different words you can put here to change the different css style elements if you check the link in the description you can see a list of all the css style elements that you can change now here's another example we're going to set the attribute let's get element by the attribute here the style and the box shadow we're going to set this to this box shadow and now we have a box shadow down here so here we're just setting one style property at a time but there are two ways that you can set a lot of style properties at once and we're using line.style.css and then you can see i've put in multiple styles color blue and then you separate with a semicolon border and adding a border here or you can set the attribute of style you set attribute now notice we don't have the word style anymore it's just attribute dot set attribute and we're attributes just a name from up here but you always have to use this set attribute and set the attribute of style and then you can put multiple styles that you want to set here one thing about this though that you need to know is that once we've run this you can see that we have the styles here this line is no longer bold we have an inline style up here to make this line bold but when you set all the styles at once with either css text or set attribute it's going to remove any inline styles and just replace all of the inline styles with whatever you are setting here sometimes it can be better just to set one style at a time if you don't want to get rid of the other styles that already exist now let me show you two ways you can figure out what styles are already on an element okay i've opened up the log here and i'm going to put okay console.log line.style so up here we were setting line.style.background to equal red and now we're just going to console.log console.logline.style now if i put line.style.background it will just show what the background color is but if i do line.style and don't put dot background it's going to show every style element so let me run that i can show you that and if i expand this this is another way of seeing every style element that you can set with javascript and this is going to show a list of every style element and you can see we have border left here this is set border color is black a lot of things though are not set you can see a lot of these just have an empty string we don't have anything set for most of these but we do have the color as blue one thing that you'll notice here if i go back to the css over in the code and we see we have font size 30 pixels well let's look at the font size in here font size is showing as an empty string here that is because when you are logging the style or working with this style here it's only going to show the inline styles and remember this up here is adding an inline style this will not show any other styles that just happen to be on the element for instance it's not going to show this style because it's not an inline style it just happens to also apply to that element now there is a way to get all the styles even styles that are not in line on the element and that's with get computed style so let me show you that now this is a little different i'm not calling it on the line variable that i set up here i'm actually calling it on the window object window dot get computed style and then i have to pass in the dom element i have to pass in this line variable that we created up here to get the computed style on the line and now it's going to show everything even computed styles so as an example if we go down to yeah font size font size is 30 pixels and now none of these are showing empty strings because everything is something we even have a height of 36 pixels now we never set the height of 36 pixels that's just the actual height so everything like before when we console.log just style a lot of them would be empty strings because they were never specifically set but when we use get computed style it's going to show what the style is even if you never said it well thanks for watching check the description for a link to the code from this video my name is beau carnes don't forget to subscribe and remember use your code for goodafter selecting a dom element you can set and get the css styles of that element so here's the html here and the html is being rendered down here and you can see that we have an id of line for this paragraph tag and we have an id of attribute here for this paragraph tag here we have an inline style making this bold and if you look up this at the css we've also added this css here so we've created the body and made the font size 30 pixels i'm just going to close this css here you can see for the javascript we've already selected two things so in the line variable we've got element by id line that's this first one the first paragraph tag then we get element by id attribute that's the the second paragraph tag here so i want to change the css style of the line so look we have line dot style dot color so line refers to this variable right here that get element by id line then you put style because we're changing the style and then we want to change the color style and we're going to set that to red so if i run that you'll see now we have red text you can also change this to background and we're going to make the background red there are a lot of different words you can put here to change the different css style elements if you check the link in the description you can see a list of all the css style elements that you can change now here's another example we're going to set the attribute let's get element by the attribute here the style and the box shadow we're going to set this to this box shadow and now we have a box shadow down here so here we're just setting one style property at a time but there are two ways that you can set a lot of style properties at once and we're using line.style.css and then you can see i've put in multiple styles color blue and then you separate with a semicolon border and adding a border here or you can set the attribute of style you set attribute now notice we don't have the word style anymore it's just attribute dot set attribute and we're attributes just a name from up here but you always have to use this set attribute and set the attribute of style and then you can put multiple styles that you want to set here one thing about this though that you need to know is that once we've run this you can see that we have the styles here this line is no longer bold we have an inline style up here to make this line bold but when you set all the styles at once with either css text or set attribute it's going to remove any inline styles and just replace all of the inline styles with whatever you are setting here sometimes it can be better just to set one style at a time if you don't want to get rid of the other styles that already exist now let me show you two ways you can figure out what styles are already on an element okay i've opened up the log here and i'm going to put okay console.log line.style so up here we were setting line.style.background to equal red and now we're just going to console.log console.logline.style now if i put line.style.background it will just show what the background color is but if i do line.style and don't put dot background it's going to show every style element so let me run that i can show you that and if i expand this this is another way of seeing every style element that you can set with javascript and this is going to show a list of every style element and you can see we have border left here this is set border color is black a lot of things though are not set you can see a lot of these just have an empty string we don't have anything set for most of these but we do have the color as blue one thing that you'll notice here if i go back to the css over in the code and we see we have font size 30 pixels well let's look at the font size in here font size is showing as an empty string here that is because when you are logging the style or working with this style here it's only going to show the inline styles and remember this up here is adding an inline style this will not show any other styles that just happen to be on the element for instance it's not going to show this style because it's not an inline style it just happens to also apply to that element now there is a way to get all the styles even styles that are not in line on the element and that's with get computed style so let me show you that now this is a little different i'm not calling it on the line variable that i set up here i'm actually calling it on the window object window dot get computed style and then i have to pass in the dom element i have to pass in this line variable that we created up here to get the computed style on the line and now it's going to show everything even computed styles so as an example if we go down to yeah font size font size is 30 pixels and now none of these are showing empty strings because everything is something we even have a height of 36 pixels now we never set the height of 36 pixels that's just the actual height so everything like before when we console.log just style a lot of them would be empty strings because they were never specifically set but when we use get computed style it's going to show what the style is even if you never said it well thanks for watching check the description for a link to the code from this video my name is beau carnes don't forget to subscribe and remember use your code for good\n"