JQuery: modifying class attributes and CSS styles _ jquery

This article mainly explains how to modify the class attributes and CSS styles of jQuery. For more information, see. Class attribute modification

Specifies the class name.
When specifying a style with the class selector, you must specify the class name for the element, that is, the value of the class attribute.
Note that each HTML element has only one class attribute. However, the value of the class attribute can be multiple names, which may contain a word list separated by spaces.
See the specific use method: http://www.w3school.com.cn/css/css_selector_class.asp

You can use the attr () method to modify the class name by using jQuery. you can also use addClass (), removeClass (), toggleClass (), and other methods to modify the class name.

AddClass ()

API: http://api.jquery.com/addClass/
The addClass () method adds the specified class name (one or more) to the matching element ).
Note that for an element, the class attribute can have multiple values. this method does not remove existing values, but appends one or more class attributes on the original basis.
Setting the class attribute using the attr () method is a overwriting process, while addClass () is an append process.
Classes are separated by spaces.
To add multiple classes, use spaces to separate the class names.
Starting from 1.4, the parameter of this method can also be passed into a function.

RemoveClass ()

API: http://api.jquery.com/removeClass/
The removeClass () method removes one or more classes from the selected element. to remove several classes, use spaces to separate class names.
If no parameter is set, this method removes all classes of the selected element.

ToggleClass ()

API: http://api.jquery.com/toggleClass/
The toggleClass () method switches (sets or removes) one or more classes of the selected element ).
This method checks the specified class in each element. If yes, the class is deleted. If no class exists, the class is added.
By adding parameters, you can set to delete only or add only.
Format: $ (selector). toggleClass (class, switch)
If the switch value is true, add only; if the switch value is false, delete only.

HasClass ()

API: http://api.jquery.com/hasClass/
The hasClass () method checks whether the selected element contains the specified class.
You can also use the is () method to implement the same function. the method parameter is passed into a selector string, for example, ". className ".

CSS style modification

JQuery also has some methods to directly return or set the CSS attributes of elements.

Css ()

API: http://api.jquery.com/css/
Read operation: Gets the specified style values (one or more) of the first element in the matched element set ).
Note: The operation to read multiple style values is added in jQuery v1.9.
Write operation: set one or more CSS attribute values for each element in the element matching element set.
The input parameter can be a single key-value pair, multiple values specified by PlainObject, or function. (v1.4 ).

JQuery will handle different situations in different browsers. for example, W3C cssFloat is styleFloat in IE. in jQuery, you can use float, then jQuery will help you translate it into the correct name in each browser.
In addition, jquerycan combine multiple keywords of CSS and domformat, such as .css(?background-color=}and .css ("backgroundColor"), which can be processed.

Height () and width ()

API: http://api.jquery.com/height/and http://api.jquery.com/width/
Height and width attributes. this high value does not include padding, border, and margin. Unless the box-sizing attribute is used.
Note that when writing, set is the width and height of content, excluding the box-sizing part.

The read operation still returns the attribute value of the first element in the set.
The difference between. css ("width") and. width () is that the former returns a value with a unit, for example, 400 px, and the latter returns a pixel value without a unit, that is.
Therefore, if the value needs to be used for some calculation,. height () and. width () are recommended.
The Read value is not necessarily an integer type. if the user scales the page, the value may be incorrect because the browser does not expose the API.
There is another inaccuracy. when the parent element of the element is hidden, the size of the element may be inaccurate.

The value type supported by the write operation is string or number.
If it is a number, jQuery defaults to px.
For a string, in addition to numbers and units, any reasonable CSS measurement can be used, such as 100%, 50%, or auto.

Position ()

API: http://api.jquery.com/position/
Returns the position of the first matching element relative to the parent element (offset parent.
Only read operations.

Offset ()

API: http://api.jquery.com/offset/
Returns the coordinates of the first matching element, or sets the coordinates of each matching element. the coordinates are relative to the document.

OffsetParent ()

API: http://api.jquery.com/offsetParent/
Returns the parent class, only the read operation.

ScrollLeft () and scrollTop ()

API: http://api.jquery.com/scrollleft/and http://api.jquery.com/scrolltop/