jquery gets and changes element attribute values

Source: Internet
Author: User

The property of the tag is called the element attribute, and the corresponding property of the DOM object in JS is called the DOM attribute. The DOM attribute name in JS is sometimes different from the original element property name.

The ================================== Action element property ==================================//Returns an element that specifies the property value var txt1_val=$ ("#txt1"). attr ("value");//Change the DOM property value $ ("#txt1") by the DOM property name of the element. attr ({value: "Txt1_value", ClassName: "Txt1_class"});// The element property value is changed by specifying the element properties of $ ("#txt1"). attr ("Class", "Txt1_class2");//assigns a value to the specified element property, and returns the value $ ("#txt1") by the method that is bundled later. attr ("Class", function () {   return "TXT1_CLASS3";}) Removes the specified element property $ ("#txt1"). Removeattr ("class");//================================== Modify the CSS class ========================== ========//adds a property value to a CSS class that is a class element attribute, you can add more than one space separating the following pairs of CSS class action functions can also fill in multiple CSS classes $ ("#txt1"). AddClass ("Txt1_class txt1_ Class2 ");//Determine if the CSS class already exists, return TRUE or False $ (" #txt1 "). Hasclass (" Txt1_class txt1_class2 ");//Remove the specified CSS class, separated by a space, and delete the element if none is specified all CSS classes $ (" # " Txt1 "). Removeclass (" Txt1_class ");//Determine if there is a CSS class, there is a delete, no add $ (" #txt1 "). Toggleclass (" Txt1_class ");// If you add this CSS class according to the back of the return, false delete this CSS class $ ("#txt1"). Toggleclass ("Txt1_class", false);//================================== Modify the CSS property ==================================//returns the specified CSS style value $ ("#txt1"). CSS ("color"), and//Multiple styles ("#txt1") are assigned at once. CSS ({color: "#ff0011", Background: "Blue"}); /assigns a specified style $ ("#txt1") at a time. CSS ("Color", "black"),//================================== width and height related ========================== ========//sets the height of the element, no value returns the height of the element in pixels per pixel $ ("#txt1"). Height (25);//sets the width of the element, no value returns the width of the element $ ("#txt1"). Width (150);//Gets the inner height of the element, The Border $ ("#txt1") is not included. Innerheight (); Gets the inner width of the element, excluding the variable width $ ("#txt1"). Innerwidth ();//Gets the outer height of the element, including the border $ ("#txt1"). Outerheight () ;//Gets the outer width of the element, including the border $ ("#txt1"). Outerwidth ();//================================== Location related ============================== ====//gets the offset position of the element relative to the window, returns two values, a top value, a left value var txt1_offset=$ ("#txt1"). offset (); var top=txt1_offset.top;var left=txt1 _offset.left;//returns the relative offset position relative to the parent element, returning two values a top, a leftvar txt1_position=$ ("#txt1"). Position (); var top=txt1_position.top The Var left=txt1_position.left;//element has a vertical scrollbar, which starts from the 20th row of pixels down the overall content and is displayed above the top of the ScrollBar Visual window//If no parameters, returns the vertex position above the current ScrollBar visual window. Distance $ ("#div_outer") from the vertex above the overall content. scrolltop (20);//The element has a horizontal scrollbar, which starts at the 20th column of pixels to the left of the overall content, and is displayed in the left-hand vertex of the ScrollBar Visual window//without parameters, Returns the position of the left vertex of the current ScrollBar visual window and the distance from the left end vertex of the overall content $ ("#div_outer"). ScrollLeft (20);

This article original, reproduced please indicate the source: http://www.eziep.net:80/details/17.html

jquery gets and changes element attribute values

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.