HTML中的attribute和property_html/css_WEB-ITnose

一、概述

attribute和property是常常被弄混的两个概念。

简单来说，property则是JS代码里访问的：

document.getElementByTagName('my-element').prop1 = 'hello';

attribute类似这种：

JS代码里访问attribute的方式是getAttribute和setAttribute：

document.getElementByTagName('my-element').setAttribute('attr1','Hello');

document.getElementByTagName('my-element').getAttribute('attr1','Hello');

二、区别

多数情况下，两者是等效的。在web标准中，常常会规定某attribute“反射”了同名的property。但是例外的情况还是不少的。

1. 名字不一致

最典型的是className，为了回避JavaScript保留字，JS中跟class attribute对应的property是className。

var div = document.getElementByTagName('div');

div.className //cls1 cls2

2. 类型不一致

最典型的是style，不接受字符串型赋值。

var div = document.getElementByTagName('div');

div.style // 对象

3. 语义不一致

如a元素的href属性。