H5中怎么獲取和設置自定義屬性

這篇文章主要介紹了H5中怎么獲取和設置自定義屬性，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

給元素自定義屬性是在HTML5中新加入的一個特性。簡單來說，自定義數據屬性規范規定任何以data-開頭屬性名并且賦值。自定義數據屬性是為了保存頁面或者應用程序的私有自定義數據，這些自定義數據屬性保存進DOM中，對于整個DOM的布局和表現無任何影響，但是卻可以方便操控整個網頁的交互以及想要表達的效果。
   比如我們通過一個對象得到了某個地區所有的城市，但是呢，我們還需要得到城市的其他信息以方便接下來的操作，我們就可以在這個城市的標簽中添加一個自定義屬性，用來存放這個地區的其他信息，操作的時候直接通過我們設置的屬性名拿值即可，可以很大空間的提升我們和計算機的操作量。
   往屬性里面存值的時候注意一定是字符串或者，所以需要存的數據是一個對象的時候，記得轉化成字符串

var cityStr = JSON.stringify(cityObj);

對于數據屬性值的獲取和設置，JQ提供了兩種方法attr()和data()
這兩種方法，當只傳遞一個參數時，這個參數時屬性名，是獲取該屬性的值，
           當傳遞兩個參數時，是設置屬性名，屬性值

 $(selector).attr(attribute,value)

下面是用data來實現存取自定義屬性的小案例：

<p id="box1"></p><button id="btn1">click1</button><button id="btn2">click2</button></body><script src="../assets/jquery-1.9.1.min.js"></script><script>
    //點擊click1向box添加屬性student，屬性值為tom
    $("#btn1").click(function () {
        $("#box1").data("student","tom")
    });    //通過屬性名獲取屬性值
    $("#btn2").click(function () {
        alert($("#box1").data("student"));
    });</script>

用attr來實現同樣的效果

<script>
    $("#btn").click(function () {
        $("#box1").attr("data-student","tom")
    });
    $("#btn2").click(function () {
        alert($("#box1").attr("data-student"));
    });</script>

通過開發者工具可以看到，當點擊保存按鈕（click1）的時候，自動給box1添加了自定義的屬性，用data方法添加的時候這里并不會看見data-student=”tom“，依舊可以通過它取出來其值”tom“,兩個并無多大區別，只是引用方式不同而已。屬性名前面加上  data-   是H5規范寫法，最好加上。

這里還要注意的是
1. 自定義的屬性名不可以與系統的屬性名相同，eg:  class、name….
2. 所有的屬性值只能是字符串，不管是系統還是自定義的
3. Html5規定，給元素自定義數據屬性時，屬性名稱以data-開頭，但是真正的屬性名不包括data-

感謝你能夠認真閱讀完這篇文章，希望小編分享H5中怎么獲取和設置自定義屬性內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!