JavaScript three methods to get and set and remove element attributes _javascript Tips

Take the following HTML as an example

Copy Code code as follows:

<div id= "mydiv" class= "BD" title= "I am div" >

<a id= "myA" href = "http://www.baidu.com" > Baidu </a>
</div>

1. Get and set element attributes through the properties of the HtmlElement type (object)

Copy Code code as follows:

var div = document.getElementById ("mydiv");
var img = document.getElementById ("Img1");
var a = document.getElementById ("MyA");
Get element attributes
alert (div.id); "Mydiv"
alert (div.classname); "BD", this is not div.class, because class is reserved keyword
alert (div.title); "I'm a div."
alert (A.HREF); Http://www.baidu.com
Set element attributes
Div.id = "MyDiv2"; ID changed to "myDiv2"
Div.classname = "FT"; class to "FT", if there is a style named "FT", it will immediately become "FT" style, the browser will immediately reflect
Div.title = "I am MYDIV2"; Change title to "I Am myDiv2"
div.align = "center"; To set center alignment
IMG.SRC = "Images/img1.gif"; Set Picture path
a.innerhtml = "Sina"; "Baidu" changed to "Sina"
A.href = "http://www.sina.com.cn"; Re-set hyperlinks

2. Get, set, remove attributes of elements (not recommended, the first two methods have exceptions in ie6,7, and the third method IE6 not supported by the getattribute (), setattribute (), and RemoveAttribute () methods. Can be used when setting custom attributes
GetAttribute () method to get the element attributes. Accept an argument, that is, to get the attribute name of the element
SetAttribute () method, which is used to set element attributes. Accept two parameters, that is, to get the attribute name and attribute value of the element
RemoveAttribute () method that removes the attributes of an element. Accepts an argument, which is the attribute name of the element to remove

Copy Code code as follows:

var div = document.getElementById ("mydiv");
var img = document.getElementById ("Img1");
var a = document.getElementById ("MyA");
Get element attributes
Alert (Div.getattribute ("id")); "Mydiv"
Alert (Div.getattribute ("class")); "BD", note that this is class, not classname, different from the above
Alert (Div.getattribute ("title")); "I'm a div."
Alert (A.getattribute ("href")); Http://www.baidu.com
Set element attributes
Div.setattribute ("id", "myDiv2"); ID changed to "myDiv2"
Div.setattribute ("Class", "FT"); class to "FT", this is also class, not classname
Div.setattribute ("title", "I am MyDiv2"); Change title to "I Am myDiv2"
Div.setattribute ("Align", "center"); To set center alignment
Img.setattribute ("src", "images/img1.gif"); Set Picture path
removing element attributes
Div.removeattribute ("class"); Remove Class attribute

3. To get, set, and remove attributes of an element through the Attributes property

Copy Code code as follows:

var div = document.getElementById ("mydiv");
//Get element Attributes
Alert (div.attributes["id"].nodevalue);//"mydiv"
//Set element attributes
div.attributes["id"].nodevalue = "MyDiv2"; ID to "MYDIV2"
//remove element attributes
Div.attributes.removeNamedItem ("class");//Remove class attribute