首頁 > web前端 > H5教程 > 主體

H5中如何取得並設定自訂屬性

一个新手
發布: 2017-09-14 10:26:50
原創
3347 人瀏覽過

給元素自訂屬性是在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>
登入後複製

H5中如何取得並設定自訂屬性
透過開發者工具可以看到,當點擊儲存按鈕(click1)的時候,自動給box1添加了自訂的屬性,用data方法添加的時候這裡並不會看見data-student=”tom“,依舊可以透過它取出來其值”tom“,兩個並無多大區別,只是引用方式不同而已。屬性名稱前面加上  data-   是H5規範寫法,最好加上。

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

以上是H5中如何取得並設定自訂屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板