js设置data属性,css data属性

　　jQuery的Attr和prop提到IE9之前的版本中属性使用不当会造成内存泄露，属性和属性的区别很让人头疼。在HTML5中，添加了data-*来自定义属性。所谓data-*其实就是data- prefix加自定义属性名，数据可以用这个结构存储。使用data-*可以解决自定义属性混乱、无管理的现状。

　　读写方式

　　Data-*有两种设置方式，可以直接写在HTML元素标签上。

　　div id= test data-age= 24 click here/div其中的data-age是一个自定义属性，当然我们也可以通过JavaScript来操作。HTML5中的每个元素都有一个dataset属性，它是DOMStringMap类型的键值对的集合。

　　var test=document . getelementbyid( test )；test . dataset . my= Byron ；这样，一个自定义属性data-my就被添加到了div中。用JavaScript操作dataset有两点需要注意。

　　1.在添加或读取属性时，我们需要删除前缀data-*。像上面的例子，我们没有用test . dataset . data-my= Byron ；的形式。

　　2.如果属性名也包含连字符(-)，就需要命名为驼峰，但是如果在CSS中使用选择器，我们就需要使用连字符格式。

　　在刚才的代码中添加一些内容。

　　style type= text/CSS [data-birth-date]{ background-color:# 0f 0；宽度：100px边距：20px}/styletest . dataset . birth date= 1989 06 15 ；这样我们通过JavaScript设置了data-birth-date自定义属性，在CSS样式表中给div添加了一些样式，看看效果。

　　读取时，也是通过dataset对象，用“.”要得到属性，还需要去掉数据前缀，连字符需要转换成驼峰命名。

　　var test=document . getelementbyid( test )；test . dataset . my= Byron ；test . dataset . birth date= 1989 06 15 ；test . onclick=function(){ alert(this . dataset . my this . dataset . age this . dataset . birth date)；}

　　getAttribute/setAttribute

　　有的同学可能会问，这个和getAttribute/setAttribute除了命名之外有区别吗？让我们看一看。

　　var test=document . getelementbyid( test )；test . dataset . birth date= 1989 06 15 ；test.setAttribute(age ，25)；test.setAttribute(data-sex ， male )；console . log(test . get attribute( data-age ))；//24 console . log(test . get attribute( data-birth-date ))；//19890516 console . log(test . dataset . age)；//24 console . log(test . dataset . sex)；//男性

　　这样我们可以看到，两者都是将属性设置为Attribute(废话，否则人们可以称之为自定义属性)，也就是说getAttribute/setAttribute可以操作所有数据集内容，数据集内容只是attribute的一个子集，在命名上比较特殊。但是，数据集中只有带数据前缀的属性(没有年龄=25这种东西)。

　　那么为什么我们还在用data-*？其中一个最大的优势就是我们可以统一管理dataset对象中的所有自定义属性。遍历什么都很方便，不会散，用着挺好的。

　　浏览器兼容性

　　坏消息是，数据的浏览器兼容性-*

　　internet Explorer 11 Chrome 8 Firefox 6.0 Opera 11.10 Safari 6，其中IE11简直就是瞎朋友的眼。看来要充分利用这个属性，还有很长的路要走。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。