標籤:html box 操作 att 樣式 order width 介紹 ade
這篇文章主要介紹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>
HTML5的自訂屬性data-*詳細介紹和JS操作執行個體