查了好久,终于查到一个靠谱的了!
attribute和property到底是什么呢,有什么区别呢?这个或许很多人都没留意,或许认为是同一个东西。
要明确attribute和property是不同的东西就要先知道它们分别是什么,这个很难说得清,举些例子就明白了。
这里我们先以ff为标准,后面再说ie的区别。以div为例,查查网页制作完全手册,会找到它有以下属性:
ALIGN align
CLASS className
ID id
TITLE title
... ...
其中第一列就是attribute,第二列就是property。
attribute是dom元素在文档中作为html标签拥有的属性;
property就是dom元素在js中作为对象拥有的属性。
所以:
对于html的标准属性来说,attribute和property是同步的,是会自动更新的,
但是对于自定义的属性来说,他们是不同步的,
先给出例子:
body>
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<div id="t" tt="1">test</div>
<script>
var o = document.getElementById('t');
o["tt"]="2";
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
o.setAttribute("tt","3");
document.writeln(o.getAttribute("tt"));
document.writeln(o["tt"]);
</script>
测试结果:
test
1 2 3 2
这个是自定义的属性;可以看出来attribute和property是不一样的;
div id="t2" title="title">test2</div>
<script type="text/javascript">
var o2=document.getElementById("t2");
o2.setAttribute("title", "ninini");
o2["title"]="nihao";
document.writeln(o2.getAttribute("title"));
document.writeln(o2["title"]);
</script>
测试结果:
test2
nihao nihao
将赋值语句倒过来一下,可以发现,浏览器以后面赋值的为准;
<script type="text/javascript">
var o2=document.getElementById("t2");
o2["title"]="nihao";
o2.setAttribute("title", "ninini");
document.writeln(o2.getAttribute("title"));
document.writeln(o2["title"]);
</script>
测试结果:
test2
ninini ninini
PS:需要记住的是: attribute指的是html标签中的属性;
property指的是js对象中的属性;