JQuery basics-change the CSS style

Source: Internet
Author: User

JQuery provides the css () method for Embedded element style change. css () methods are diverse in usage. Either of them accepts two input parameters: style attributes and style values, separated by commas. For example, to change the link color, we can use the following code:

$ ("# 61dh a" ).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 define attribute variables first, and then directly assign the value to the css () method. Example:

Var divcss = {
Background: '# EEE ',
Width: '478px ',
Margin: '10px 0 0 ',
Padding: '5px 10px ',
Border: '1px solid # CCC'
};
$ ("# Result" cmd.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, the css () method provided by jQuery 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 a" ).css ("color ")
// It is similar to the first example, but here we only pass one parameter (style attribute). The last thing we want to introduce is 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 valid. Therefore, we need to use the event class method-hover () provided by jQuery (). 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:

$ ("# 61dh a" ).css ('color', '#123456 ');
$ ("# 61dh a"). hover (function (){
Watermark (this).css ('color', '#999 ');
},
Function (){
Watermark (this).css ('color', '#123456 ');
});
// The two functions of the hover () method are separated by commas. You may note that this method is not concise at all (against jQuery's purpose). In fact, the hover () provided by jQuery () the 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.