DOM对象的三种在添加自定义属性的方式

3,490 阅读1分钟

DOM对象的三种在添加自定义属性的方式

一是 通过 “.”+“属性名”

二是 setAttribute()(getAttribute()获取)

三是 直接在元素标签上加属性 如:< div name="" id="te" class="" content="">< /div>

三者的区别主要是在获取属性值方面:

var e = document.getElementById("te");

1.获取属性

//用 . 来引用,必须是内置的(IE 可以访问自定义属性),而且引用的时候,区分大小写。
alert(e.id);//"test"
alert(e.className);//"cls"
alert(e.ss);//undefined(IE下为 "ss");

//用getAttribute 来引用,可以访问自定义属性,不区分大小写。
alert(e.getAttribute("id"));//"test"
alert(e.getAttribute("ID"));//"test"
//注意浏览器差异
alert(e.getAttribute("class"));//"cls"(Firefox)
alert(e.getAttribute("className"));//"cls"(IE)

alert(e.getAttribute("ss"));//"ss"

2.设置属性

//使用 . 运算符和 setAttribute都可以。但是对于自定义属性,使用.运算符的设置的属性无法通过getAttribute获取,反之亦然。*

e.setAttribute("abc2","abc2");
e.abc3 = "abc3";

e.title1 = "abc";
alert(e.getAttribute("title1"));//null
var e = document.getElementById("test");

因此 对于style,className的设置,通常是使用" . "运算符来实现