How jQuery adds styles to elements

How jQuery adds styles to elements

This document describes how jQuery adds styles to elements. We will share this with you for your reference. The details are as follows:

1. Get and set styles

$ ("# Tow "). attr ("class") // obtain the class attribute whose ID is tow $ ("# two "). attr ("class", "divClass") // sets the class attribute whose Id is two.

2. append a style
Copy codeThe Code is as follows: $ ("# two"). addClass ("divClass2") // append the style divClass2 to an object whose ID is two

3. Remove a style

$ ("# Two"). removeClass ("divClass") // remove the style of the class name divClass of the object whose ID is two. $ (# Two). removeClass ("divClass divClass2") // remove multiple styles.

4. Switch Class Name
Copy codeThe Code is as follows: $ ("# two"). toggleClass ("anotherClass") // switch the anotherClass style repeatedly

5. Determine whether a style exists.
Copy codeThe Code is as follows: $ ("# two"). hasClass ("another") =$ ("# two"). is (". another ");

6. Get the style in the css style
Copy codeThe Code is as follows: $ ("div" ).css ("color") // sets the color attribute value. ((element).css (style)

Set a single style
Copy codeThe Code is as follows: $ ("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

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 = $ ("div"). offset (); var left = offset. left; // get 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 last position style attribute set to relative or absolute's grandfather node, just like offset, the returned object also includes two attributes: top and left.

9. scrollTop () and scrollLeft () Methods

$ ("Div"). scrollTop (); // gets the distance from the top of the element's scroll bar. $ ("Div"). 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 is 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 top, 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

I hope this article will help you with jQuery programming.

Articles you may be interested in:

• JQuery uses the hide method to hide the usage instance of the specified Element class style
• JQuery adds a class style to multiple different elements
• JQuery uses the addClass () method to add multiple class styles to the element.
• JQuery uses the CSS () method to set multiple styles for a specified element at the same time.
• Css style of JQuery operation elements
• Example of setting element style usage using jQuery
• JQuery three methods for operating element css styles
• Jquery gets a simple example of adding styles to dom fixed elements
• How does jquery determine whether an element has a specified style?
• Jquery display, hide elements, and add and delete styles
• Style flashing occurs when a child element exists in the extension Jquery plug-in for processing mouseover.
• Learning the attributes and styles of elements in jQuery (4) from scratch