HTML5的自定義屬性data-*詳細介紹和JS操做實例

這篇文章主要介紹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>