jQuery css() Method part1

4.1

jQuery CSS method part 1

Hello guys, welcome to our series ‘JQuery’. In our last segment we covered all the HTML related individual methods of JQuery. And in the last segment we also finished our HTML module of JQuery.

Our today’s segment is on CSS methods in JQuery. Basically in the last segment we have seen that HTML methods used to do two tasks. Either it returned the values or all our values were set. CSS also has the same task. But as we know that JQuery is used to perform things dynamically, so all the methods of JQuery that we have through CSS will be used to dynamically manipulate CSS and dynamically add or remove it. 

So we will start the CSS method of JQuery. In this too, same as HTML either we will get values or we will set values. About all the CSS methods we can recognize by their name that they do not work with elements, they work CSS designing properties. That means width, height, background color, position and many others.

With the help of CSS methods we can work on all CSS related properties. If in designing, in colors or size, we have to change something from CSS, then we will use CSS methods. If changes are to be done related to dom then we will use HTML methods. So here keep the difference in your mind that all this we are doing why we are doing, on that basis you will get your answer. That the task which I have to do which changes I have to do dynamically, are they from designing or from elements. On that basis you can identify which method you have to use. 

Now we will see basic CSS dom related methods. There are three methods.

‘CSS’, ‘offset’ and ‘position’. We will look at each of them one by one.

First one is the CSS method. The CSS method is the easiest if we took any element or we passed a selector through ID or class. On that ID class element, what CSS is applied? If we want to get that CSS then whatever property name we wrote, we can pass that and get that. 

Second, if we pass a value with a property name then we can apply all those CSS. That means here also we are performing two things, get means return or set. After doing get and set there is a third option available ‘set multiple CSS properties’. Means normally till the last segment all the properties and methods that we saw, we either did get or set. 

CSS is a kind of method in which we can change more than one property. Means here you can see, without curly braces if we have to update only one property then without curly braces we will pass that property name and values in quotes. But if we want to update multiple values then we will open multiple curly braces then we will pass the value that’s inside it and we will keep it comma separated, kind of an object. We can say that we are passing objects inside brackets. 

So we have three things for CSS. First, to get value. Second, to set value. And third, to set multiple values. 

Now we will take an example, in which, if I have applied CSS on any ‘P’ that is paragraph like here I have written background color. If we want to get that then how will we do so? 

Like here I will open sublime text…. Here we will go in HTML…. “Example…. CSS”. Here we will add our library….Here we will write whatever we have to add, we will write our script..And here will come our “style”. ..We keep everything “center align” in style that’s why “text align center”. And here we will also add heading “H one”… “example of CSS…. to get the …property”.

Now we will work everything on button click so here we will add a button, take ID. “Button…. click”. Now what do we have to do? Let’s say, I am adding a P here. In P I’m writing, “This is…. LearnVern” and I will give a little bit of styling to this P. …Like “background color…. light coral”. We will save this program….

Let’s say, I name this program… CSS …and we will run this program. So this is our program you can see this is my heading ‘example of CSS to get the property’. Nothing will happen from button click now and this is our statement in which we can see background color. Let’s say I add a color here that means our text color is white. So we have background color and text color. 

Now I want that this is my P. Which color is in the background of P, I don’t know its name. Then what will I do? Whenever I click on it then whatever is my background color, its name is displayed. Means in the alert box I can see its name. So it’s a very simple program. 

What we will do here. “Dollar” ….“document dot…. ready”… “function”…. Means after our script is loaded; we have to work on button click. Button’s ID is normally BTN. So, “dollar… hashtag button dot (8 seconds pause, typing) click” “function”. Means whenever we click on the button then what should happen. So let’s say we have some properties of that background color properties we gave in the P tag. 

Means I will show an alert in which I will write “background color…. of… P”…. “plus dollar”. We want the background color of P so we will write it under “dollar”. So, here comes “P dot …CSS”. And here we will write about the background. So from here we will copy our property…. Clear? And full stop. Now I will save it. Reload. Click. ‘Background color of P’. You can see here we got the color property under RGB. 

As of now we can say that RGB shows the combination of red green and blue that this color, light coral, is the combination of these numbers of red green and blue. So you can see here that my background property is returning. Now here if I write “plus… BR”… and add text color of P(5 seconds pause, typing). “text color of P” is. Then here the CSS part that I have will paste as it is after plus’. And here just color. We will save it. Reload. Click. 

Background color of P is RGB then BR is printed. ‘Text color of P is RGB two five five, two five five, two five five. That is the white color. So you can see here that in a single line I get background color and text color. So the CSS property that we took, if we want to get that then how will we do it? 

So something like a dollar we have an element or reference, pass that. Then with dot CSS in parenthesis you simply have to pass in its property. So this is our program when we have to get a property. 

Now we will see a program in which we have to set the property. So how can we do that? Let’s say I copy this program and paste it here. Example CSS. Example to set the property. Now under this P “this is learnvern”. So I’ll remove the properties here and save it. CSS underscore set… property. Now I’ll run this program. We named it as “CSS set property”. 

So here “example of CSS to set the property”. Currently we have written “this is learnvern” I will click the things written above click. I will save it. Reload.  Nothing will happen now. But now what do I have to do? 

The properties that we already gave in the first program, now I will set them dynamically. That means when I click the button, its text color changes to white. As of now either I can give background color light coral or text color white. Let’s say for now I just give background color. Then what I’ll do. Above button click. “Dollar P dot CSS”. Here I have to give my background color. “Background… color”. See carefully there is no colon here; there is comma and then my value is “light coral”… Save. Reload. Click. Here it’s not working on click it means I have written something wrong here. I missed T in light. Click.

So you can see as soon as I clicked my background color changed to light coral. Reload. Click again. That means CSS is set above click.  How is this CSS set dynamically? I passed the selector here. With the help of dot CSS method my background is set dynamically. Now here, in syntax we saw that either we can set one property or we can set multiple properties.

In case of multiple properties, we used curly braces. So, let’s say I remove this portion from here and add curly braces. Then enter and paste. But now when we add multiple properties then what we have to do? Then we have to use colon here and comma here.

If you want then we can return to our slide to verify it. “Property name colon value comma property name value”. So here is the background color. We’ve given light coral. Then my second property “color colon” value I’ll give “white comma”. Third property, I want my P to be in a limited width. So like, “width…hundred pixels or we can take five hundred also, comma… padding… colon… ten pixels”. 

Let’s save this program. And we’ll reload this program. Now I’ll click it and then will see what all CSS has been applied. So on clicking you can see that in five hundred pixels width and ten pixels padding, with background color and color property my P is set here. 

Now if I want to give a margin here. “Margin… Zero space auto”. Let’s save it. Reload. Click. So here you can see, with margin. Means I had to keep center alignment that’s why I did this. 

So can see, from JQuery this simple P is converted into an eye-catching view by clicking. Means you can add as many properties as you want so that the view is more eye-catching and beautiful. So we added all these properties dynamically through JQuery that too from the CSS method. 

So here we learnt that in the first program that if we want to know the value of current values of which elements are already set, CSS is provided then for that we will pass CSS without property value, only property name and we will receive that value. If we have to set dynamically then we will pass with property we can also pass multiple properties. So this was about both programs of how to get and set CSS.

Here we covered the program ‘to return CSS’. We performed this program with one color and also with multiple properties. So we covered all three programs.

So guys, that’s all for this segment. We will meet in our next segment. Where we’ll continue the same topic and we will see the rest of the methods of the same topic. 

So see you in the next video of the same segment. Thank you.