H5的data-*自訂屬性使用詳解

這次帶給大家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中文网其它相关文章！

推荐阅读：

HTML文档中嵌入JS方法总结

React Form组件封装步骤详解

以上是H5的data-*自訂屬性使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！