How to operate Css styles in JQuery _ jquery-js tutorial

This article mainly introduces how to operate Css styles in JQuery. For more information, see. The Code is as follows:

// 1. Get and set the style

$ ("# Tow"). attr ("class") gets the class attribute whose ID is tow.

$ ("# Two"). attr ("class", "pClass") sets the class attribute whose Id is two.

// 2. append a style

$ ("# Two"). addClass ("pClass2") is the append style of the object whose ID is two. pClass2

// 3. Remove a style

$ ("# Two"). removeClass ("pClass") removes the style of the class name pClass of the object whose ID is two.

$ (# Two). removeClass ("pClass pClass2") remove multiple styles.

// 4. Switch the class name

$ ("# Two"). toggleClass ("anotherClass") // switch the anotherClass style repeatedly

// 5. Determine whether a style exists

$ ("# Two"). hasClass ("another") =$ ("# two"). is (". another ");

// 6. Obtain the style in the css style

$ ("P" ).css ("color") sets the color attribute value. elem(element).css (style)

// Set a single style

$ ("P" ).css ("color", "red ")

// Set multiple styles

$ ("P" ).css ({fontSize: "30px", color: "red "})

$ ("P" ).css ("height", "30px") =$ ("p"). height ("30px ")

$ ("P" ).css ("width", "30px") =$ ("p"). height ("30px ")

// 7. offset () method

// It is used to obtain the relative offset of an element in the current window. The returned object contains two attributes: top and left.

// Note: only valid for visible elements.

Var offset = $ ("p"). offset ();

Var left = offset. left; // obtain the left offset.

Var top = offset. top; // get the right offset

// 8. position () method

// It is used to obtain the relative offset of an element relative to the parent node of the last position style attribute set to relative or absolute, just like offset, the returned object also includes two attributes: top and left.

// 9. scrollTop () and scrollLeft () Methods

$ ("P"). scrollTop (); // gets the distance from the top of the element's scroll bar.

$ ("P"). scrollLeft (); // gets the distance from the left side of the element's scroll bar.

// 10. The toggle and slideToggle methods in jQuery can display and hide an element. The difference is:

// Toggle: the dynamic effect ranges from right to left. Horizontal action.

// SlideToggle: the dynamic effect goes from bottom to top. Vertical action.

// For example, if you want to achieve the dynamic effect of a tree from bottom to bottom, you can use slideToggle.

$ ('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