Change CSS style

PreviousArticleThis section describes how to Add/Remove CSS classes. You need to define the CSS class and then change the style of an element for "class. This article introduces another method to change the CSS style-Add the style method directly. There are two methods to use CSS styles: one is to reference an external file that defines CSS styles in the head, and the other is to embed styles directly in HTML elements.How to Add/Remove CSS classesThe methods described in this article usually need to define the CSS class in an external CSS style file. The methods described in this article are similar to embedded CSS.

Jquery providesCSS ()Embedded methods to change the element style,CSS ()Methods are diverse in use. Either of them accepts two input parameters: style attributes and style values, separated by commas. For example, if we want to change the link color, we can use the followingCode:

$ ("# 61dh").Css ('color', '#123456 ');
 
 
// Here, the selector '$ ("# 61dh a")' indicates all links under the element whose ID is '# 61dh.
 
 
//. CSS ('color', '#123456'); sets the color to '#123456'
 
If we need to change multiple style attributes, We can first define the attribute variables and then assign themCSS ()Method. Example:
 
 
VaRDivcss = {
 
 
Background: '# Eee ',
 
Width: '478px ',
 
 
Margin: '10px 0 0 ',
 
 
Padding: '5px 10px ',
 
 
Border: '1px solid # CCC'
 
};
 
 
$ ("# Result"Pai.css (divcss );
 
 
// Here we first define a CSS style attribute variable 'divcss ', which is similar to creating an external CSS file.
 
// Then, use the CSS () method provided by jquery to assign the property to the DIV with ID '# result.
 
 
In addition,CSS ()The method can also be used to view the CSS attribute values of an element. For example, to view the link color, use the following code:
 
 
$ ("# 61dh"Developer.css ("Color")
 
// Similar to the first example, but here we only pass one parameter (style attribute)
 
 
Finally, we will introduce how to set the link style (for example, color) after the mouse is crossed ). We cannot use the selector to directly select the link in the mouse over the status, that is$ ("A: hover ")Is not true. Therefore, we need to use the event class method provided by jquery-Hover (). It is worth noting that,Hover ()Two functions need to be defined in the method. One is that the mouse is out of date, and the other is that the mouse is behind. The specific method is as follows:
 
$ ("# 61dh").Css ('color', '#123456 ');
 
 
$ ("# 61dh"). Hover (Function(){
 
 
$ (This).Css ('color', '#999 ');
 
},
 
 
Function(){
 
 
$ (This).Css ('color', '#123456 ');
 
});
 
 
// Use commas to separate the two functions of the hover () method.