站長資訊網
        最全最豐富的資訊網站

        html5自定義屬性什么用

        html5自定義屬性“data-*”用于存儲私有頁面后應用的自定義數據,而自定義的數據可以讓頁面擁有更好的交互體驗(不需要使用Ajax或去服務端查詢數據),語法“<element data-*="指定屬性值(一個字符串)">”;“data-*”屬性由兩部分組成:1、屬性名不要包含大寫字母,在“data-”后必須至少有一個字符;2、屬性值,該值可以是任何字符串。

        html5自定義屬性什么用

        本教程操作環境:windows7系統、HTML5版、Dell G3電腦。

        html5自定義屬性data-*

        data-* 屬性用于存儲私有頁面后應用的自定義數據,是 HTML5 新增的屬性。

        <element data-*="somevalue">
        • somevalue:指定屬性值 (一個字符串)

        data-* 屬性可以在所有的 HTML 元素中嵌入數據。

        自定義的數據可以讓頁面擁有更好的交互體驗(不需要使用 Ajax 或去服務端查詢數據)。

        data-* 屬性由以下兩部分組成:

        • 屬性名不要包含大寫字母,在 data- 后必須至少有一個字符。

        • 屬性值,該屬性值可以是任何字符串

        注意: 自定義屬性前綴 "data-" 會被客戶端忽略。

        利用dataset可以獲取data-屬性構造的對象,該方法目前只能在Chrome 、Opera等部分瀏覽器中實現,其他瀏覽器如需獲取其屬性值需要使用getAttribute和setAttribute來操作。

        只要在標簽里面以”data-”為前綴定義我們的自定義屬性就可以用來進行一些數據的存放。

        <div id="myDiv" data-attribute="value">在標簽里設置H5新增的自定義屬性</div>

        這個data屬性還可以應用在CSS中,前提是你的瀏覽器支持after偽類,以及content的attr屬性(低版本的IE不支持):

        <div id="myDiv" data-attribute="屬性值">data屬性應用于CSS中</div>
        #myDiv{   position: ralative; }   #myDiv:hover:after{   position: absolute;   top: 0px;   left: 0px;   content: attr(data-attribute);   color: red; }

        如何獲取data屬性的值?

        <div id="myDiv" data-attribute="value">在標簽里設置H5新增的自定義屬性</div>

        1、使用getAttribute來獲取

        var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-attribute");

        2、使用Html5自定義屬性對象Dataset來獲取

        var myDiv = document.getElementById("myDiv");   var theValue = myDiv.dataset.attribute;

        注意:帶連字符連接的名稱在使用的時候需要命名駝峰化,即大小寫組合書寫,這與應用元素的style對象類似,dom.style.borderColor。例如data屬性為data-other-attribute,則我們要獲取相應的值可以使用:myp.dataset.otherAttribute

        如果Html元素定義了多個自定義屬性,如何獲取?

        <div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在標簽里設置多個自定義屬性</div>

        2、使用循環遍歷

         var myDiv = document.getElementById("myDiv"); var attrs = myDiv.attributes, var expense = {}, i, j;   for (i = 0, j = attrs.length; i < j; i++) {   if(attrs[i].name.substring(0, 5) == 'data-') {     expense[attrs[i].name.substring(5)] = attrs[i].value;   } }

        3、使用dataset屬性

        var expense = document.getElementById('myDiv').dataset;

        注:dataset并不是典型意義上的JavaScript對象,而是個DOMStringMap對象DOMStringMap是HTML5一種新的含有多個名-值對的交互變量

        1)、讓所有的自定義的屬性值塞到一個數組中

        var chartInput = [];   for (var item in expense) {   chartInput.push(expense[item]); }

        2)、刪掉一個data屬性

        delete myDiv.dataset.attribute;

        3、增加一個data屬性

        myDiv.dataset.attribute4 = 'value4';

        dataset的兼容性處理

        如果瀏覽器不支持dataset,有必要做一下兼容處理:

        if(myDiv.dataset) {   myDiv.dataset.attribute = "valueXX"; // 設置自定義屬性   var theValue = myDiv.dataset.attribute; // 獲取自定義屬性 } else {   myDiv.setAttribute("data-attribute", "valueXX"); // 設置自定義屬性   var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性 }

        結語:

        使用dataset操作data 要比使用getAttribute速度稍微慢些,雖然使用dataset不能提高代碼的性能,但是對于簡潔代碼,提高代碼的可讀性和可維護性是很有幫助的。

        【推薦課程:HTML5視頻教程、web前端】

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品人成在线播放新网站| 国产精品福利在线观看| 人妻熟妇乱又伦精品视频 | 国产精品网站在线观看| 精品日本一区二区三区在线观看| 精品性影院一区二区三区内射| 久久九九久精品国产| 午夜精品美女写真福利| 亚洲精品亚洲人成在线观看| 911亚洲精品国产自产| 国产精品无码一区二区三区电影| 婷婷成人国产精品| 在线电影国产精品| 69久久夜色精品国产69| 亚洲国产精品无码久久SM| 国产精品一区二区久久精品无码| 无码人妻精品中文字幕免费| 国产一区二区三区欧美精品| 国产一区二区三区久久精品| 亚洲国产美女精品久久久久∴| 精品国产不卡一区二区三区| 青青草国产精品久久久久| 国产精品亚洲а∨无码播放| 亚洲欧美日韩久久精品第一区 | 亚洲精品久久久www| 国产精品爽爽ⅴa在线观看| 精品少妇无码AV无码专区| 欧美亚洲日本久久精品| 国产亚洲精品影视在线产品| 久久99国产精品久久99| 国产精品无码无在线观看| 真实国产精品vr专区| 精品人妻无码专区中文字幕| 天天爽夜夜爽精品视频app| 国产99视频精品免视看7| 日韩精品专区AV无码| 亚洲精品黄色视频在线观看免费资源| 精品无码国产自产拍在线观看蜜| 国产成人精品综合久久久| 欧美精品国产精品| 久久91精品国产91久久小草|