jquery css class

$(selecor).css(name)

The css() method returns or sets one or more style properties of the matched element.

Set the color of the <p> element:

Java code  

1. $(".button").click(function(){  
2.   $("p").css("color","blue");  
3. });  

 Use functions to set css properties

Java code  

1. $(selector).css(name,function(index,value))  
2. //index is the index position of the element in the object collection, and value is the original attribute value.  

 For example, set the color of all paragraphs to red

Java code  

1. $("button").click(function(){  
2.     $("p").css("color",function(){return "red";});  
3.     });  

 Gradually increase the width of the div

Java code  

1. $("div").click(function() {  
2.   $(this).css(  
3.     "width", function(index, value) {return parseFloat(value) * 1.2;}  
4.   );  
5. });  

 set multiple css properties

Java code  

1. $(selector).css({property:value, property:value, ...})  

 E.g

Java code  

1. $("button").click(function(){  
2.     $("p").css({  
3.       "color":"white",  
4.       "background-color":"#98bf21",  
5.       "font-family":"Arial",  
6.       "font-size":"40px",  
7.       "padding":"5px"  
8.     });  
9.   });  
10. });  

 

 jQuery width(),height()

The width() method sets or returns the width of the element (excluding padding, borders, or margins).

 The height() method sets or returns the height of the element (excluding padding, borders, or margins).

Java code  

1. $("button").click(function(){  
2.   var txt="";  
3.   txt+="Width: " + $("#div1").width() + "</br>";  
4.   txt+="Height: " + $("#div1").height();  
5.   $("#div1").html(txt);  
6. });  
7.  

 Increase the background color of the entire page to increase the snow white

body{
“background-color” ：snow；
}