jquery Basics-Changing CSS styles

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 the element with Id ' #61dh '.

. css (' color ', ' #123456 '), which means to set the color to ' #123456 '

If we need to change more than one style attribute, we can define the attribute variable first and then assign the value directly to the css() method. Examples are as follows:

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, using the CSS () method provided by jquery, assign the attribute to the DIV with the id ' #result '.

In addition, the methods provided by jquery css() can also be used to view the CSS property values of an element. For example, if we want to see the color of the link, we can use the following code:

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

Similar to the first example, but here we pass only one parameter (style attribute)

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 that $("a:hover") it is not valid. 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, the other is 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

You may have noticed that this approach is not concise (contrary to the purpose of jquery), but the method provided by jquery hover() is not intended 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.

Transferred from: http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html

jquery Basics-Changing CSS styles