HTML5自定义属性总结

其中data-age是自动定义的属性。当然，我们也可以通过JavaScript对它们进行操作。HTML5中的元素将具有数据集属性，它是DOMStringMap类型的键值对的集合vartest=document.getElementById('test');test.dataset.my='Byron';这会将自定义属性data-my添加到div。使用JavaScript操作数据集有两点需要注意。我们需要在添加或读取属性的时候去掉前缀data-*，像上面的例子中，我们没有使用test.dataset.data-my='Byron';的形式。如果属性名中还包含连字符（-），则需要将其转换为驼峰式大小写，但是如果在CSS中使用了选择器，我们需要使用连字符格式在刚才的代码中添加内容[data-birth-date]{background-color:#0f0;宽度：100px；边距：20px；}test.dataset.birthDate='19890615';这样我们通过JavaScript设置data-birth-date自定义属性，并添加了一些样式到CSS样式表中的div。在读取效果的时候，我们也使用了dataset对象，使用了“.”。获取属性，同样需要去掉data-前缀，连字符需要转换为驼峰式vartest=document.getElementById('test');test.dataset.my='拜伦';test.dataset.birthDate='19890615';test.onclick=function(){alert(this.dataset.my+''+this.dataset.age+''+this.dataset.birthDate);}getAttribute/setAttribute有同学可能这个和getAttribute/setAttribute除了命名不同还有什么区别吗？我们来看看vartest=document.getElementById('test');test.dataset.birthDate='19890615';test.setAttribute('age',25);test.setAttribute('数据性别','男');console.log(test.getAttribute('data-age'));//24console.log(test.getAttribute('data-birth-date'));//19890516console.log(test.dataset.age);//24console.log(test.dataset.sex);//malesowecan可以看出，都是在属性上设置属性（废话，也可以叫自定义属性），也就是说getAttribute/setAttribute可以操作所有数据集内容，数据集内容只是asubsetofattribute,special是特殊的命名方式，但是数据集中只有带data-前缀的属性（没有age=25），那为什么要用data-*呢？最大的优势之一是我们可以将所有自定义属性放在数据集对象中。统一管理，遍历所有神马非常方便，而且不会分散，好用。