jquery Modify class attributes and CSS style collation _jquery

Class attribute Modification

Class attributes, which are class attributes, specify the name of the classes.
When specifying a style with a class selector, you need to specify the class name, which is the value of the class attribute, for the element.
Note that each HTML element has only one class attribute. But the value of the class attribute can be multiple names, which may contain a list of words, separated by spaces.
See the specific use method: Http://www.w3school.com.cn/css/css_selector_class.asp

Using jquery to modify the class name can be done either by modifying the "class" attribute with the attr () method or by AddClass (), Removeclass (), Toggleclass (), and so on.

AddClass ()

api:http://api.jquery.com/addclass/
The AddClass () method adds the specified class name (one or more) to the matching element.
Note The class attribute can have more than one value for an element. The method does not remove values that already exist, but instead appends one or more class attributes on the original basis.
Setting the Class property with the Attr () method is an overlay procedure, while addclass () is an append procedure.
Class is ultimately separated by spaces.
If you need to add more than one class, separate the class name with a space.
Starting with 1.4, the parameters 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. If you want to remove several classes, separate the class names with spaces.
If no parameters are passed, the method removes all classes from the selected element.

Toggleclass ()

api:http://api.jquery.com/toggleclass/
The Toggleclass () method toggles (sets or removes) one or more classes of the selected element.
The method examines the specified class in each element, and if it exists, it is deleted and added if it does not exist.
By adding parameters, you can set up to delete only or add only.
Format: $ (selector). Toggleclass (Class,switch)
When the switch value is true, it is only added when false and only deleted.

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, method parameters passed in a selector string, such as ". ClassName".

CSS style modification

In jquery, there are ways to directly return or set the CSS properties of an element.

CSS ()

api:http://api.jquery.com/css/
Read operation: Gets the specified style value (one or more) of the first element in the matching element collection.
Note: The operation to read multiple style values was added to the jquery v1.9.
Write: Sets the value of one or more CSS properties for each element in the matching element collection.
The passed parameter can be a single key-value pair, can be multiple values specified by Plainobject, or a function. (v1.4).

jquery handles things that are not quite the same in every browser, such as the cssfloat of the stylefloat in IE, where you can use float in jquery, and jquery will help you translate it into the correct name that should be in every browser.
Also, jquery can reasonably interpret the CSS and DOM format for multiple-word attributes, such as. css ("Background-color") and. CSS ("BackgroundColor"), which are all handled.

Height () and width ()

api:http://api.jquery.com/height/and http://api.jquery.com/width/
Height and Width properties. This width does not include padding,border and margin unless the box-sizing attribute is used.
Note that the set is the width of the content, excluding the box-sizing part of the write operation.

The read operation is still the property value that returns the first element of the collection.
The difference between CSS ("width") and. Width () is that the former returns a value with units, such as 400px, which returns the pixel value without the unit, that is, 400.
So if the value needs to be used for some sort of calculation,. Height () and. Width () are recommended for use.
The value read is not necessarily an integral type, and if the user scales the page, the values may not be correct because the browser does not have an API to expose the situation.
There is also an inaccurate situation where the element's size may not be readable when its parent element is hidden.

The value type supported by the write operation is a string or a number.
If it is a number, jquery defaults to PX as the unit.
If it is a string, in addition to the number plus 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, which is relative to the document.

Offsetparent ()

api:http://api.jquery.com/offsetparent/
Returns the parent class, with only read operations.

ScrollLeft () and ScrollTop ()

api:http://api.jquery.com/scrollleft/and http://api.jquery.com/scrollTop/