JQuery css () selector usage instructions

Source: Internet
Author: User

CSS operations have an important approach: CSS ()

CSS () has three different syntax to complete their work:

$ (selector). CSS (Name,value)
$ (selector). css ({properties})
$ (selector). CSS (name)

Return CSS Property use CSS (name) to return the value of the CSS property for the first matching element specified:

Example

The code is as follows Copy Code

$ (this). CSS ("Background-color");

Try» Set CSS properties and values use CSS (name,value) to set CSS properties for all matching elements:
Example

The code is as follows Copy Code

$ ("P"). CSS ("Background-color", "yellow");

We need to change multiple style attributes, we can first define the property variables, and then directly assign to the CSS () method. Examples are as follows:

The code is as follows Copy Code

var divcss = {
Background: ' #EEE ',
Width: ' 478px ',
margin: ' 10px 0 0 ',
padding: ' 5px 10px ',
border: ' 1px solid #CCC '
};
$ ("#result"). CSS (DIVCSS);

Here we first define a CSS style attribute variable ' divcss ', which is similar to creating an external CSS file.
Then through the CSS () method provided by jquery, the attribute is assigned to the DIV with id ' #result '. In addition, the CSS () method provided by jquery can also be used to view the CSS property values of an element. For example, if we want to see the color of a link, we can use the following code:

The code is as follows Copy Code

$ ("#61dh a"). CSS ("color")

Similar to the first example, but here we only pass one argument (style attribute) The last thing to describe is how to set the link style (for example, color) after the mouse stroke. We can not use the selector directly select the mouse across the state of the link, which means $ ("a:hover") is not established. So we need to use the event class method provided by jquery-hover (). It is worth noting that the hover () method needs to define two functions, one is the mouse is out of date, and the other is after the mouse is drawn. The specific methods are as follows:

The code is as follows Copy Code

$ ("#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 you may notice that this method is not concise (contrary to the purpose of jquery), in fact, jquery provides the hover () method is not used to change the CSS style. In practical use, it is recommended to use the Add/Remove CSS method to change the mouse across the link style.


Toggle Style

jquery provides Toggleclass () method to control style switching

The code is as follows Copy Code
$ ("P"). Toggleclass ("another");

Determines whether a style is included and returns False if there is a return true

The code is as follows Copy Code

$ ("P"). Hasclass ("another"); Equivalent to $ ("P"). Is (". another");

How jquery Deletes a CSS property


You can use class to set up and then Removeclass (), for example

The code is as follows Copy Code

$ ("#test"). attr ("style", {"Display": "None"});

You can use it if you don't want it at all

The code is as follows Copy Code

$ ("#test"). Removeattr ("style");

Note: Use of removeattr is OK.

Also, if you are just showing and hiding (not animating), define a. Hide {Display:none}, and then use AddClass () and Removeclass () performance will be higher.

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.