JQuery CSS () method to change the CSS style, jquerycss
JQuery getting started example: Use the CSS () method to change the existing CSS style sheet. The css () method is diverse in usage. There is one type that can accept two input parameters: style attributes and style values, which are separated by commas. For example, to change the link color, you can write the code as follows:
. Code
- $ ("# 61dh a" ).css ('color', '#123456 ');
- // Selector '$ ("# 61dh a")' indicates all links under the element whose ID is '# 61dh.
- //. Css ('color', '#123456'); sets the color to '#123456'
If you need to change multiple style attributes, You can first define the attribute variables and then assign them directly to the css () method. Example: ui framework sharing
. Code
- Var mycss = {
- Background: '# EEE ',
- Width: '478px ',
- Margin: '10px 0 0 ',
- Padding: '5px 10px ',
- Border: '1px solid # CCC'
- };
- $ ("# Result" cmd.css (divcss );
The above code first defines a CSS style attribute variable "mycss", similar to creating an external CSS file, and then using the css () method, assign the property to the DIV with ID '# result.
In addition, the css () method provided by jQuery can also view the css attribute values of an element. For example, to view the link color, the Code is as follows:
. Code
- $ ("# 61dh a" ).css ("color ")
You will find that this is similar to the first example, but only one parameter (style attribute) is passed here ).
The last section describes how to set the link style (for example, color) after the mouse is crossed. You need to use the jQuery event class method-hover (). It is worth noting that the hover () method needs to define two functions, one is mouse stroke, and the other is behind the mouse. The specific method is as follows: ui framework sharing
. Code
- $ ("# 61dh a" ).css ('color', '#123456 ');
- $ ("# 61dh a"). hover (function (){
- Watermark (this).css ('color', '#999 ');
- },
- Function (){
- Watermark (this).css ('color', '#123456 ');
- });
- // Use commas to separate the two functions of the hover () method.
Maybe you have noticed that this method is not concise. In fact, the jQuery hover () method is not used to change the CSS style. In practical use, we recommend that you use the Add/remove CSS method to change the style of the link over the mouse.
How does jquery change the css style?
Add the following section in html:
<Script type = "text/javascript" src = "ajax.googleapis.com/ajax/libs
/Jquery/1.4.0/jquery. min. js "> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". Home"). click (function (){
$ (This). addClass ("home_hover"). removeClass ("home ");
})
})
</Script>
How can I remove the css style from the following jQuery code? Be knowledgeable!
The regular syntax is to set the css style in CSS to a class. Then use jquery addClass () removeClass ().
Generally, modification to large-scale css styles should not be written in js Code. This helps to centralize and reuse CSS code. Imagine if you have set a lot of such css style code in js, and one day you suddenly think that the color needs to be changed, it is hard to find, and the whole modification workload is huge.
<Script type = "text/javascript" src = "ajax.googleapis.com/...min.js"> </script>
<Style>
. P_style {
Color: white;
Background-color: #98bf21;
Font-family: Arial;
Font-size: 20px;
Padding: 5px;
}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn01"). click (function (){
$ ("P"). addClass ("p_style ")
});
$ ("# Btn02"). click (function (){
// $ ("P"). unbind (". css ");
$ ("P"). removeClass ("p_style ");
});
});
</Script>
</Head>
<Body>
<P> This is a paragraph. </p>
<P> This is another paragraph. </p>
<Button id = "btn01" type = "button"> change the paragraph style </button>
<Button id = "btn02" type = "button"> restore a paragraph style </button>
</Body>
</Html>