HTML5的自定义属性data-*详细介绍和JS操作实例

Posted 2020-10-01 武侯668

这篇文章主要介绍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>