本文講述了關于HTML5的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);//headerconsole.log(header.getAttribute('id'));//headerconsole.log(header.title);//testconsole.log(header.getAttribute('title'));//testconsole.log(header.myTitle);//undefinedconsole.log(header.getAttribute('myTitle'));//monster1935

在本文示例中演示了通過兩種方法獲取html元素的標準特性以及自定義特性?？梢园l現：

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)//monster1935var age = user.getAttribute('data-age');console.log(age);//123//設置相關屬性值user.setAttribute('data-sex','male');console.log(user.getAttribute('data-sex'));//male