Three methods for obtaining, setting, and removing element attributes in javascript

Source: Internet
Author: User
The following html is used as an example. 1 & lt; divid & quot; myDiv & quot; class & quot; bd & quot; title & quot; I am div & quot; & gt; 2 & lt; imgid & quot; img1 & quot;/& gt; 3 & lt; aid & quot; myA & quot; href & quot; http://www.bai

The following html is used as an example.

1
2
3 Baidu
4 1. Obtain and set the element features through the attributes of the HTMLElement type (object)


1 var div = document. getElementById ("myDiv ");
2 var img = document. getElementById ("img1 ");
3 var a = document. getElementById ("myA ");
4 // obtain element features
5 alert (div. id); // "myDiv"
6 alert (div. className); // "bd", this is not div. class, because class is reserved keyword
7 alert (div. title); // "I am div"
8 alert (a. href); // http://www.baidu.com
9 // set element features
10 div. id = "myDiv2"; // change the id to "myDiv2"
11 div. className = "ft"; // change the class to "ft". If there is a style named "ft", it will immediately become "ft" and the browser will immediately respond.
12 div. title = "myDiv2"; // change the title to "myDiv2"
13 div. align = "center"; // set center alignment
14 img. src = "images/img1.gif"; // set the image path
15 a. innerHTML = "Sina"; // change "Baidu" to "Sina"
16 a. href = "http://www.sina.com.cn"; // reset the hyperlink
2. the getAttribute (), setAttribute (), and removeAttribute () methods are used to obtain, set, and remove the features of an element (not recommended. IE6 and 7 of the first two methods have an exception, the third method is not supported by IE6 and can be used to set custom features)
The getAttribute () method is used to obtain element features. Take a parameter to obtain the feature name of the element.
SetAttribute () method, used to set element features. Two parameters are used to obtain the feature name and feature value of an element.
The removeAttribute () method is used to remove the features of an element. Accept a parameter, that is, the feature name of the element to be removed.


1 var div = document. getElementById ("myDiv ");
2 var img = document. getElementById ("img1 ");
3 var a = document. getElementById ("myA ");
4 // obtain element features
5 alert (div. getAttribute ("id"); // "myDiv"
6 alert (div. getAttribute ("class"); // "bd", note that this is a class, not a className, which is different from the above
7 alert (div. getAttribute ("title"); // "I am div"
8 alert (a. getAttribute ("href"); // http://www.baidu.com
9 // set element features
10 div. setAttribute ("id", "myDiv2"); // change the id to "myDiv2"
11 div. setAttribute ("class", "ft"); // change the class to "ft", which is also a class instead of className.
12 div. setAttribute ("title", "myDiv2"); // change the title to "myDiv2"
13 div. setAttribute ("align", "center"); // set center alignment
14 img. setAttribute ("src", "images/img1.gif"); // you can specify the image path.
15 // remove element features
16 div. removeAttribute ("class"); // remove the class Feature
3. Get, set, and remove element features through attributes


1 var div = document. getElementById ("myDiv ");
2 // obtain element features
3 alert (div. attributes ["id"]. nodeValue); // "myDiv"
4 // set element features
5 div. attributes ["id"]. nodeValue = "myDiv2"; // change the id to "myDiv2"
6 // remove element features
7 div. attributes. removeNamedItem ("class"); // remove the class Feature

Author: cangkukuaimanle
 

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.