JQuery change CSS of an element

JQuery change CSS of an element

JQuery change CSS is one of the hundreds and thousands of work that you can accomplish with JQuery. JQuery is a JavaScript library simplified for better scope and usage. CSS attributes are often required to be changed depending on some other event in the webpage.

For a very simple example, let us consider that we want to change the height of a div dynamically whenever the user clicks on it. This is not possible with simple CSS declarations because CSS are declared one time during the page load and cannot change dynamically.

The only possible way is to use JavaScript. We are instead using JQuery change CSS to produce a cleaner and less complicated code.

JQuery change CSS – the general syntax

The general form in which we can declare the JQuery change CSS command is mentioned as follows –

$(“div”).click(function(){
	$(this).css(‘height’,’500px’);
});
/* 
Within the CSS function,
The first parameter gives the attribute 
The second parameter gives the value
*/

In this procedure, we can implement any CSS style we want and set a custom value dynamically.

Here I have mentioned some common examples for your development usage. You can however create your own codes by implementing the code similarly.

JQuery change CSS – some examples

Changing background color with JQuery

$(“div”).click(function(){
	$(this).css(‘background-color’,’green’);
});

JQuery change CSS border

$(“div”).click(function(){
	$(this).css(‘border-width’,’5px’);
});

JQuery change CSS font color

$(“input”).click(function(){
	$(this).css(‘font-color’,’#dddddd’);
});

JQuery change CSS display style – hide element without JQuery methods

$(“div”).click(function(){
	$(this).css(‘display’,’none’);
});

JQuery change CSS common mistakes

Some of the most common mistakes that developers come through during JQuery change CSS coding are mentioned here. Do take some time to look into these points if you want to avoid unnecessary panic and chaos while implementing your hard work.

Missing quotes or commas – This can create an error and you wouldn’t even know why an error keeps on hitting. Put the attribute names within commas. Here’s the example –

// this is wrong
$(“div”).click(function(){
	$(this).css(display,none);
});

// this one’s correct
$(“div”).click(function(){
	$(this).css(‘display’,’none’);
});

Putting a colon just like CSS syntax instead of a comma – Remember, this is JavaScript. So, the syntax expects the attribute and the value to be passed as parameters to a function. Function parameters are always separated with a comma and not a colon. That’s CSS. Don’t put it here. Here’s the code example –

// this is wrong
$(“div”).click(function(){
	$(this).css(‘display’:’none’);
});

// this one’s correct
$(“div”).click(function(){
	$(this).css(‘display’,’none’);
});

If your code still isn’t running then you might need some extra help. Try out my article on JQuery not working – ten most common reasons. That might come of help to you.

JQuery change CSS in the real development world

This mechanism can help you if need to implement a very robust and interactive web design. Your client requirements might call the need for dynamic CSS. This tutorial can help you achieve that.

JQuery change CSS works well in all browsers that are compatible with JQuery. Since these codes are not separately created, you do not need to worry about compatibility issues.

All the best and keep coding.