本篇教程探讨了HTML5教程 自定义属性data-*详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

这篇文章主要介绍JS操作HTML自定义属性的方法,以实例形式分析了html中自定义属性的设置与对应的javascript操作技巧
 
具体如下：

HTML代码如下（其中的displayName为自定义属性）：
 

<input type="text" id="txtBox" displayName="123456" />

 
获取自定义属性值:
 

document.getElementById("txtBox").getAttribute("displayName");document.getElementById("txtInput").attributes["displayName"].nodeValue

 
设置自定义属性值:
 

document.all.txtBox.setAttribute("displayName ","123456");document.getElementById("txtInput").attributes["displayName"].nodeValue = "123456"



关于data-属性选择器
在实际开发时，您可能会发现它很有用，你可以根据自定义的 data- 属性选择相关的元素。例如使用querySelectorAll选择元素：

代码如下:
// 选择所有包含 ‘data-flowering‘ 属性的元素document . querySelectorAll ( ‘[data-flowering]‘ ) ;// 选择所有包含 ‘data-text-colour‘ 属性值为red的元素document . querySelectorAll ( ‘[data-text-colour="red"]‘ ) ;
同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式，例如下面这个例子：

代码如下:
<style type ="text/css">.user {width : 256px ;height : 200px ;}
.user[data-name=‘feiwen‘] {color : brown}.user[data-name=‘css‘] {color : red}</style><div class = "user" data-id = "123" data-name = "feiwen" > 1 </div><div class = "user" data-id = "124" data-name = "css" > 码头 </div>
 
 
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！