這次帶給大家H5中data-*屬性使用方法匯總，H5中data-*屬性使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、關於html元素的特性
1.html元素都存在一些標準的特性：
id 元素在文件中的唯一識別碼；
title 有關元素的附加說明訊息，一般透過工具提示條顯示出來；
lang 元素內容的語言程式碼，很少使用；
dir 語言的方向，很少使用；
className，與元素的class特性對應，考慮到與ECMAScript的保留字class的衝突，因此命名為className；
2.操作特性的方法：
getAttribute() 取得相關特性，也可以取得自訂的特性，區別於使用DOM元素的屬性取得；
setAttribute() 設置相關特性；
removeAttribute() 刪除相關特性；
3.關於獲取html元素特性中使用getAttribute()與直接使用DOM元素的屬性取得的差異：
例如：
var header=document.getElementById('header');
console.log(header.id);//header
console.log(header.getAttribute('id'));//header
console.log(header.title);//test
console.log(header.getAttribute('title'));//test
console.log(header.myTitle);//undefined
console.log(header.getAttribute('myTitle'));//monster1935登入後複製
在本文範例中示範了透過兩種方法取得html元素的標準特性以及自訂特性。可以發現：
getAttribute()既可以存取標準特性也可以存取自訂特性，而是用DOM元素本身屬性存取html元素特性的時候只能存取標準特性。
原因：
html元素中只有標準特性才會以屬性的形式加入DOM物件。
特殊情況：
有兩類特性，雖有在DOM物件中有對應的屬性名，但是屬性的值與透過getAttribute()傳回的值並不相同。
1.style特性：
使用DOM物件屬性存取style的時候，返回的是一個對象，而使用getAttribute()方法取得的時候返回的是css文字。
2.事件處理程式（例如：onclick）：
使用DOM物件的屬性存取的時候，傳回的是一個JavaScript函數，而透過getAttribute()方法取得時回傳的是javas程式碼。
使用方法：
只有在取得自訂特性的時候使用getAttribute()方法，操作DOM的時候，使用物件的屬性來取得。
二、Html5中的自訂屬性
1.Html5規格中規定自訂屬性需要加入前綴data-,目的是提供與渲染無關的資訊。
2.使用getAttribute()方法以及setAttribute()方法來操作自訂屬性。
例如：
var user=document.getElementById('user');
//使用attributes方法操作属性
//获取相关属性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//设置相关属性值
user.setAttribute('data-sex','male');
console.log(user.getAttribute('data-sex'));//male登入後複製
上述範例中展示了使用getAttribute()以及setAttribute()方法操作html元素的自訂屬性。
3.使用dataset操作自訂屬性
例如：
var el=document.querySelector('#user');
console.log(el.id);
console.log(el.dataset); //返回的是一个DomStringMap对象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 设置相关属性
el.dataset.home="shandong";
console.log(el.dataset);
// 删除相关属性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);登入後複製
以上範例展示了使用dataset屬性來操作自訂屬性。 dataset屬性的值是一個DOMStringMap的一個範例，是一個名值對的對應。在這個映射中，每個data-name的形式的屬性都有一個對應的屬性，不同的是屬性名稱中沒有data-前綴。 （例如，自訂屬性是data-name，映射中對應的屬性就是name）.還有一點要注意的是如果data-屬性名稱中包含了連字符（例如：data-date-of-birth ),則映射中對應的屬性為dateOfBirth,即轉換為對應的駝峰格式來顯示。
4.dataset屬性的相容性問題
#Chrome 8 Firefox(Gecko) 6.0 Internet Explorer 11 Opera 11.10 Safari 6
5.使用data-屬性選擇器
1.获取相关DOM元素
var elem=document.querySelectorAll("[data-name='monster1935']");
2.设置相关css样式
<style>
p{
width:100px;
height:200px;
margin:20px;
}
p[data-name="monster"]{
background-color: green;
}
p[data-name="monster1935"]{
background-color: red
}
</style>登入後複製
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
怎么实现JS同步、异步、延迟加载
怎样使用@angular/cli V6.0开发PWA应用
以上是H5中data-*屬性使用方法匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！
