jquery (vi) jquery modifies class and CSS styles

Source: Internet
Author: User

jquery modifies class attributes and CSS styles Class Property Modificationthe Class property is the Class property, which specifies the name of the category. when specifying a style with a class selector, you need to specify the class name for the element, which 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 list of words, separated by spaces.For the specific use of the method see: Http://www.w3school.com.cn/css/css_selector_class.asp class name modification with jquery can either modify the "class" attribute with the attr () method, or use addclass (), removeclass () , Toggleclass () and other methods to complete.  addclass ()api:http://api.jquery.com/addclass/The addclass () method increments the specified class name (one or more) to the matching element.  Note For an element, the class attribute can have multiple values. The method does not remove values that already exist, but appends one or more class attributes to the original base . Setting the Class property with the Attr () method is an overlay process, while addclass () is an append procedure. The class is eventually separated by a space.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 arguments are passed, the method will remove all classes of 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 present, is deleted and added if it does not exist.by adding parameters, you can either set the delete only or add only the action.format:$ (selector). Toggleclass (class,switch) When the switch value is true, only add; false, only delete.   hasclass ()api:http://api.jquery.com/hasclass/the Hasclass () method checks whether the selected element contains the specified class.  you can also implement the same function with the IS () method, which passes a selector string, such as ". ClassName".   CSS Style modificationThere are also methods in jquery that directly return or set the element's CSS properties. 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 is only added to jquery v1.9.Write operation: Sets the value of one or more CSS properties for each element in the matching element collection.the arguments passed in can be a single key-value pair, or it can be multiple values specified by Plainobject, or function. (v1.4). jquery handles some of the specifics of the different browsers, such as the cssfloat in IE is stylefloat, in jquery, you can use float, Then jquery will help you translate it into the correct name that should be in every browser.also, jquery will reasonably interpret multi-word attributes in CSS and DOM formats, 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 properties. This wide-high value does not include padding,border and margin. Unless the Box-sizing property is used.Note that when writing the set is the content of the width of the high, not including the box-sizing part. the read operation is still a property value that returns the first element of the collection.. the difference between CSS ("width") and . Width () is that the former returns the value of the band unit, such as 400px, which returns the value of the pixel without a unit, that is,. so if the value needs to be used for some sort of calculation,. Height () and . Width () are recommended. The resulting value is not necessarily an integral type, and if the user scales the page, the value may be incorrect because the browser does not expose the API for this situation.There is also an inaccurate case where the element's size may not be readable when the parent element of the element is hidden. the value type supported by the write operation is a string or a number.in the case of numbers, jquery is the default PX unit.if it is a string, in addition to the number of 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 matched element relative to the document.   offsetParent ()api:http://api.jquery.com/offsetparent/returns the parent class, only read operations.  scrollleft () and scrolltop ()api:http://api.jquery.com/scrollleft/and http://api.jquery.com/scrollTop/   ReferencesSan Yuan Zhang Long teacher javaweb Video tutorialjQuery api:http://api.jquery.com/W3school Reference Manual:Property Action: http://www.w3school.com.cn/jquery/jquery_ref_attributes.aspCSS Action: http://www.w3school.com.cn/jquery/jquery_ref_css.aspCSS class selector: http://www.w3school.com.cn/css/css_selector_class.asp 


jquery (vi) jquery modifies class and CSS styles

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.