HTML5中data-*自定義屬性的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)HTML5中data-*自定義屬性的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、關(guān)于html元素的特性

1.html元素都存在一些標(biāo)準(zhǔn)的特性：

    id 元素在文檔中的唯一標(biāo)識(shí)符；

    title 有關(guān)元素的附加說(shuō)明信息，一般通過(guò)工具提示條顯示出來(lái)；

    lang 元素內(nèi)容的語(yǔ)言代碼，很少使用；

    dir 語(yǔ)言的方向，很少使用；

    className，與元素的class特性對(duì)應(yīng)，考慮到與ECMAScript的保留字class的沖突，因此命名為className；

2.操作特性的方法：

    getAttribute() 獲取相關(guān)特性，也可以獲取到自定義的特性，區(qū)別于使用DOM元素的屬性獲?。?nbsp;  

    setAttribute() 設(shè)置相關(guān)特性； 

    removeAttribute() 刪除相關(guān)特性；

3.關(guān)于獲取html元素特性中使用getAttribute()與直接使用DOM元素的屬性獲取的區(qū)別 ：

例如：

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

在本文示例中演示了通過(guò)兩種方法獲取html元素的標(biāo)準(zhǔn)特性以及自定義特性?？梢园l(fā)現(xiàn)：

getAttribute()既可以訪問(wèn)標(biāo)準(zhǔn)特性也可以訪問(wèn)自定義特性，而是用DOM元素本身屬性訪問(wèn)html元素特性的時(shí)候只能訪問(wèn)標(biāo)準(zhǔn)特性。

原因：

html元素中只有標(biāo)準(zhǔn)特性才會(huì)以屬性的形式添加到DOM對(duì)象中。

特殊情況：

有兩類特性，雖有在DOM對(duì)象中有對(duì)應(yīng)的屬性名，但是屬性的值與通過(guò)getAttribute()返回的值并不相同。

1.style特性：

使用DOM對(duì)象屬性訪問(wèn)style的時(shí)候，返回的是一個(gè)對(duì)象，而使用getAttribute()方法獲取的時(shí)候返回的是css文本。

2.事件處理程序（例如：onclick）：

使用DOM對(duì)象的屬性訪問(wèn)的時(shí)候，返回的是一個(gè)JavaScript函數(shù)，而通過(guò)getAttribute()方法獲取時(shí)返回的是javas代碼。

使用方法：

只有在獲取自定義特性的時(shí)候使用getAttribute()方法，操作DOM的時(shí)候，使用對(duì)象的屬性來(lái)獲取。

二、Html5中的自定義屬性

1.Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無(wú)關(guān)的信息。

2.使用getAttribute()方法以及setAttribute()方法操作自定義屬性。

例如：

var user=document.getElementById('user');
//使用attributes方法操作屬性
//獲取相關(guān)屬性值
var name=user.getAttribute('data-name');
console.log(name)//monster1935
var age = user.getAttribute('data-age');
console.log(age);//123
//設(shè)置相關(guān)屬性值
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); //返回的是一個(gè)DomStringMap對(duì)象
console.log(el.dataset.name);
console.log(el.dataset.age);
// 設(shè)置相關(guān)屬性
el.dataset.home="shandong";
console.log(el.dataset);
// 刪除相關(guān)屬性
// delete el.dataset.home;
el.dataset.home = null;
console.log(el.dataset);

以上示例展示了使用dataset屬性來(lái)操作自定義屬性。dataset屬性的值是一個(gè)DOMStringMap的一個(gè)示例，是一個(gè)名值對(duì)的映射。在這個(gè)映射中，每個(gè)data-name的形式的屬性都有一個(gè)對(duì)應(yīng)的屬性，不同的是屬性名中沒(méi)有data-前綴。（比如，自定義屬性是data-name，映射中對(duì)應(yīng)的屬性就是name）.還有一點(diǎn)需要注意的是如果data-屬性名中包含了連字符（比如：data-date-of-birth),則映射中對(duì)應(yīng)的屬性為dateOfBirth,即轉(zhuǎn)換為相應(yīng)的駝峰格式來(lái)顯示。

4.dataset屬性的兼容性問(wèn)題

Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+

5.使用data-屬性選擇器

1.獲取相關(guān)DOM元素

var elem=document.querySelectorAll("[data-name='monster1935']");

2.設(shè)置相關(guān)css樣式

<style>
  div{
    width:100px;
    height:200px;
    margin:20px;
  }
  div[data-name="monster"]{
    background-color: green;
  }
  div[data-name="monster1935"]{
    background-color: red
  }
</style>

關(guān)于“HTML5中data-*自定義屬性的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。