Ways to manipulate CSS styles in jquery _jquery

Copy Code code as follows:

//1, getting and setting styles

$ ("#tow"). attr ("class") Gets the class attribute with ID tow

$ ("#two"). attr ("Class", "Divclass") sets the class attribute with ID two.

2. Append style

$ ("#two"). AddClass ("DivClass2") appends a style to an object with an ID of two divClass2

3. Remove Style

$ ("#two"). Removeclass ("Divclass") removes the style with the class name Divclass of the object with ID two.

$ (#two). Removeclass ("Divclass divClass2") removes multiple styles.

4. Toggle Class Name

$ ("#two"). Toggleclass ("Anotherclass")//repeat Toggle Anotherclass style

5, to determine whether there is a certain style

$ ("#two"). Hasclass ("another") ==$ ("#two"). Is (". another");

6, get the style in the CSS style

$ ("div"). CSS ("color") sets the Color property value. $ (Element). CSS (Style)

Set a single style

$ ("div"). CSS ("Color", "red")

Set multiple styles

$ ("div"). css ({fontsize: "30px", Color: "Red"})

$ ("div"). CSS ("height", "30px") ==$ ("div"). Height ("30px")

$ ("div"). CSS ("width", "30px") ==$ ("div"). Height ("30px")

7.offset () method

Its role is to get the relative offset of the element in the current window, where the returned object contains two attributes, top and left.

Note: Valid only for visible elements.

var offset=$ ("div"). offset ();

var left=offset.left; Get left Offset

var top=offset.top; Get right Offset

8, Position () method

Its role is to get the relative offset of the grandparent node that the element is set to relative or absolute relative to the most recent position style property, and, like offset (), it returns an object that includes two properties, top and left.

9, ScrollTop () method and ScrollLeft () method

$ ("div"). scrolltop (); Gets the distance from the top of the scroll bar of the element.

$ ("div"). ScrollLeft (); Gets the distance from the left of the scroll bar of the element.

10, jquery in the toggle and Slidetoggle methods, can achieve the display of an element and hidden. The difference is:

Toggle: The dynamic effect is from right to left. Horizontal movement.

Slidetoggle: Dynamic effect from bottom to top. The vertical action.

For example, to achieve a tree from the bottom to the contraction of the dynamic effect, the use of slidetoggle on the OK.

$ (' input '). attr ("ReadOnly", True)//set the INPUT element to ReadOnly
$ (' input '). attr ("ReadOnly", False)//Remove the ReadOnly attribute of the INPUT element
$ (' input '). attr ("Disabled", true)//set the INPUT element to disabled
$ (' input '). attr ("disabled", false)//Remove the disabled attribute of the INPUT element