JQuery css () method changes CSS style instance parsing

Source: Internet
Author: User

Transferred from: http://www.jbxue.com/article/24588.html

Share an example of getting started with jquery: Using the CSS () method to change an existing CSS style sheet, the CSS () method has a variety of uses. One of them can accept two input parameters: style attributes and style values, separated by commas. For example, to change the link color, you can write code like this:

$ ("#61dh a"). css (' color ', ' #123456 ');
The selector ' $ ("#61dh a") ' represents all links under the element with Id ' #61dh '.
. css (' color ', ' #123456 '), which means to set the color to ' #123456 '
If you need to change multiple style attributes, you can define the attribute variables and assign them directly to the CSS () method.
var mycss = {
Background: ' #EEE ',
Width: ' 478px ',
margin: ' 10px 0 0 ',
padding: ' 5px 10px ',
border: ' 1px solid #CCC '
};
$ ("#result"). CSS (DIVCSS);
The code above defines a CSS style attribute variable "mycss", similar to creating an external CSS file, and then using the CSS () method to assign the attribute to the DIV with the id ' #result '.
In addition, the CSS () method provided by jquery can also view the CSS property values of an element. (www.jbxue.com Script Academy)

For example, to view the color of the link, the code is as follows:
$ ("#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 thing to describe is how to set the link style after the mouse stroke (for example: color), you need to use the JQuery event class Method-hover (). It is worth noting that the hover () method needs to define two functions, one of which is mouse stroke, and the other is after the mouse stroke. Here's how:
$ ("#61dh a"). css (' color ', ' #123456 ');
$ ("#61dh a"). Hover (function () {
$ (this). CSS (' color ', ' #999 ');
},
function () {
$ (this). CSS (' Color ', ' # 123456 ');
}); The two functions of the
//hover () method are separated by commas
Perhaps smart you have noticed that this method is not concise, hehe, in fact, the jquery hover () method is not used to change the CSS style. In practice, it is recommended to use the Add/Remove CSS method to change the link style across the mouse.

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.