jquery Basics-Changing CSS styles

Source: Internet
Author: User

jquery provides css() a way to implement an embedded change element style, which css() has a variety of methods in use. One 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 following code:

$ ("#61dh a"). css (' color ', ' #123456 ');//Here The selector ' $ ("#61dh a") ' represents all the links under an element with an ID of ' #61dh '. . css (' color ', ' #123456 '), which means to set the color to ' #123456 '

If we need to change multiple style attributes, we can define the attribute variables and assign them directly to css() the method. Examples are as follows:

Ar divcss = {background: ' #EEE ', Width: ' 478px ', margin: ' 10px 0 0 ', padding: ' 5px 10px ', border: ' 1p X Solid #CCC '};$ ("#result"). CSS (DIVCSS);//Here we first define a CSS style property variable ' divcss ', which is similar to creating an external CSS file. Then, using the CSS () method provided by jquery, assign the attribute to the DIV with the id ' #result '.

In addition, css() jquery offers method can also be used to view the value of a CSS property for an element. For example, if we want to see the color of the link, we can use the following code:

$ ("#61dh a"). CSS ("color")//is similar to the first example, but here we pass only one parameter (style property)

the last one is how to set the link style (for example, color) after the mouse stroke. We cannot use the selector to directly select the link in the mouse-over state, which means$("a:hover")is not tenable. So we need to use the event class method provided by jquery-hover(). It is important to note thathover()The method needs to define two functions, one is the mouse is out of date, the other is the mouse after the 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

you may have noticed that this approach is not succinct (contrary to the purpose of jquery), in fact jquery offers hover() methods are not used to change CSS styles. In practice, it is recommended to use the Add/Remove CSS method to change the link style across the mouse.

jquery Basics-Changing CSS styles

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.