JQuery modifies class attributes and CSS styles, and jquerycss

Source: Internet
Author: User

JQuery modifies class attributes and CSS styles, and jquerycss
JQuery modifies class attributes and CSS stylesClass Attribute ModificationSpecifies 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 list of words separated by spaces. for specific use method, see: http://www.w3school.com.cn/css/css_selector_class.asp with jQuery class name modification can be usedAttr ()Method to modify the "class" attribute. You can also useAddClass (),RemoveClass (),ToggleClass ().AddClass ()API: The http://api.jquery.com/addClass/ addClass () method adds the specified class name (one or more) to the matched 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 to the original. 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: The http://api.jquery.com/removeClass/ 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: The http://api.jquery.com/toggleClass/ 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 ). if toggleClass (class, switch) switch is set to true, add only; if it is set to false, delete only.HasClass ()API: http://api.jquery.com/hasClass/ 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, such ". className ".CSS style ModificationJQuery 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 value (one or more) for 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 wide 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 of the set .. css ("width") and. the difference between width () is that the former returns a value with units, for example, 400px; the latter returns a value without units, that is, 400. so if the value needs to be used for some calculation ,. height () and. width () is 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: The 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: The 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: The http://api.jquery.com/offsetParent/ returns the parent class, only read operations.ScrollLeft () and scrollTop ()API: Secret reference information San Si garden Zhang Long teacher JavaWeb video tutorial 75 jQuery API: http://api.jquery.com/w3school Reference Manual: attribute operation: http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp CSS operation: http://www.w3school.com.cn/jquery/jquery_ref_css.asp CSS class selector: http://www.w3school.com.cn/css/css_selector_class.asp

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.