Get Computed properties in javascript

apart from JavaScript how are you doing I hope you're doing good I was just sleep the whole day I got up hit the gym in my home then got to sleep again got my food and then sleep again and then it's night somehow this rarely happens to me but somehow I was just under some weather or something anyways I hope you are doing good with your health and let's go ahead and get started with another video or will be doing another project in the DOM and you're gonna love this one because you're gonna understand a whole lot about the things that you will be doing as a project work later on in the DOM so we have seen how the Dom manipulation work the basics of it in house on these timely event works there are more timely events as well not just setinterval and settimeout but others are there but I'm pretty sure you can manage them or you can request me for a video now what we're gonna do in here is I got another project for you so go ahead visit learn code online dot in and you're gonna find the attachment with this video it says a project or project in this project in this up first and formost let's go ahead and drag drop this proj to up here there we go nice and easy and what this project on HTML right click and open with life server so what you're gonna see is these few elements again are you don't need to worry about how the CSS is going on or how these are being written we're just here to understand and do some work on the JavaScript so we have got this one now let's analyze the part which we should be worried about we are not worried about the styling part just the HTML part is what we are worried about so we have these color hovers and we are having few of the colors like red cyan boil at orange pink and we can add more as well feel free to just add a color and then the styling we can add more so this is the one thing now the biggest thing that we have to learn here is that right now my script or jeaious is totally empty and i want to write a simple code which can grab me if i just pass on any element to it like this red element or maybe this violet element it can grab me what color is there beside this element so it sounds fairly simple but it's actually a little bit more complicated than you think so it's gonna be a little bit of that so again the video is gonna be a little bit longer because I want to do this in one video but fairly should be simple so looking at the code or inspecting the code you can do that in the browser itself but here it's much more easier so I can see that I have got some unique classes to every of these element like red and I can again fire my query selector or get element by ID in order to select them so should be fairly fairly easy if I go ahead and do that so let's go ahead and say that I want to just select it so let's call the first one as a red so how we're gonna select the red we're gonna simply say document dot query selector and in the query selector I'm gonna provide a class so what do I write for class a hash or a dot did you remember that okay I know you remember that it's a dot for class and we're going to just simply say red now we got an access to the element now we need to do this for lots of others as well so let's first count how many of them are there so one two three four five we need total of five one is already there hold on your option key and Shift key and we need five so one is there two three four five okay and now we're gonna change the values here so again I'm gonna hold on my option key and we're gonna have two cursors so instead of the right red this is gonna be Sian and again we need to change another one so instead of the red this one is gonna be violet and again you can name these colors however you like just make sure that you're selecting the same thing in the index dot HTML so we got red cyan wallet I'm gonna copy this one and we got orange and pink as well so let's go up here not here come on looks like I'm still sleepy we're gonna go up here I'll remove this one this one is violet and we got red cyan we got two violets shouldn't be like that orange and orange as you can see yes I'm still feeling a bit sleepy looks like the last one that we got is pink but not too much okay pink and this one is got pink okay so now everything that's on the webpage right now like everything technically but what we can see visually is available to us and we have got some selector element which we can actually reach out to us okay but if you notice there is another guy in the index dot HTML which is known as a center right now there is nothing but we can actually target that and hold that since we are targeting all the elements as well so we're gonna call this one s Center again we're gonna go for the same document dot query selector and I want to select a class which is not worth it which is Center okay so this is there we are not using it but it's there right now okay now how can I find out the background color of each of these element because it's not like I can say pink dot background color it's not gonna give me so how do we do that for that we need to learn a new property here notice I told you that there is a global object of a label which is known as a window now this window has a lot of properties up here notice here we got animation we got audio audio params it's a pretty gigantic object and it's being used quite a lot when you copy the stuff click to copy and whole bunch of other things there is a property here which is known as get computed style and this is little bit weird first inform us so when I say get computed style it requires you to pass on a property or a selector which you have already selected so this is an element which it requires you to pass on so let's just see get computed style I want to get a computed style of the first element which is red I would like to go ahead and get a console.log on that so we're gonna say console dot log and there we go looks nice let's see what we are able to see on the browser so let's go up here and we're gonna right-click inspect on the console we're gonna clear everything let's hit a reload so the JavaScript comes up and there we go so when I run this property get computed style it gives me entire CSS style declaration it gives me animation delay everything that is set somehow by you or me by some other third-party stylings like bootstrap or anything it gives you the final version of it means it's a computed style that's being given to you now notice here you can see there is a border bottom right and whole bunch of things which are not really like you have got font family you got display you got border you got background color and pretty much everything here though notice very strangely something which confuses a lot of people now I'm gonna say that I have given you this element and since these are all objects you want to get font family and everything you can grab it I'm gonna go ahead and grab a background here let's go ahead and save this and we are calling console.log this I'm gonna hit reload again now when I say give me the background it gives me RGB value it says none repeat scroll 0% 0% auto padding so everything that browser is applying to that element is being given to me whether that's just the background color or maybe some additional properties that you don't have a border you should have a border everything whatever is computed out is given to me now what strangely actually kind of gets a surprise to the people that whenever I say background color in my CSS I write it something like this background - color and then I define a color probably white just like this so this is how I write CSS but whenever a computed property is being calculated things actually change you don't say background - color every single - is being changed instead of the background color we write it this way so the second letter or the subsequent letter gets changed into uppercase letter in case you're worried about something like font family so when we write font - a family it's being also replaced - gets removed and we get family so this is something surprising to a lot of people but this is how we actually grab it so again if you want to just grab a background color then you have you don't actually say just the background it's gonna give you everything you want to grab a background color don't say background - color actually save background color now let's go ahead and save this one and now when I go back I hit a reload and notice this time I'm getting background-color now in most of the cases in the computed property the background is converted into RGB and regardless if you are putting up the background colors in the hash values the six values it doesn't really matter the computed style is gonna give you this again now there are ways how we can convert these RGB to hex values and we do it all the time in many of the website but right now this is all what we want so again a quick summary window object has a lot of properties one of them is get computed style if you are looking forward to grab some of the styling or the style properties from any particular element it just requires you to pass on that particular element and once you pass it on whatever the property you want to grab you have to make sure that if the property have dashes the dash is being removed and it is being a capitalized letter that's how it is being used so there we go we got a simple hold of it but that's not it we want to kind of convert that into a method so I'm gonna go ahead and kind of rewrite it I'm gonna keep it this one here for your later on have a look kind of a thing now let's go ahead and write a simple method which actually can do this so let's go ahead and simply say Const or bar however you liked okay so I'm gonna simply say Const come on if I can write that and I'm gonna simply say get BG color feel free to name it anything how do we write it we can actually go ahead and say something like function and just like this and this it's totally doable but I would now request you or recommend you to use arrow functions we will discuss them later on but right now all you do for the arrow function is you remove the keyword arrow remove the keyword function and we use the arrow just like this again if you want to use the function way that's also fine now how this is gonna work just like we were able to pass on this element here we're gonna simply say that give me a selector selector is not gonna be a good word I'm gonna say selected element so give me a selector element whatever you are giving it to me and then we are gonna just simply return the value whatever is being computed here so we're gonna copy this and we're gonna simply say I'm gonna return you this entire thing but I don't want to just return you the thing which is red I instead want to compute this with whatever the element you are giving it to me and that's all it takes to convert this entire thing into a method now I can call this method which is get VG color and instead of just uh passing up a red here I can pass on probably a pink here and again this is not gonna give us any console.log because we are not actually printing out these things we are just getting a return statement so in case you want to have it we have to actually say manually console dot log go like this and go like this so now I'm able to grab the pink values here if I hit a reload this technically is pink almost pink but I can go ahead and change it to orange save that and now this one is what we're getting is orange hopefully okay so there we go a whole lot of stuff about get computed style and we're gonna do some more stuff in this project and we're gonna study a bit more of it we have to study about events and whole bunch of other things let's go ahead and catch up in the next one [Music]

Channel: Hitesh Choudhary

Views: 19,799

Keywords: Programming, LearnCodeOnline, javascript, javascript for beginners, javascript course, javascript tutorials, learn javascript, udemy, coursera, udacity, learn js online, javascript projects, js tutorials

Id: NONbkVx5FAM

Length: 12min 26sec (746 seconds)

Published: Wed Aug 12 2020