溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5中怎么獲取自定義屬性值

發(fā)布時間:2020-09-28 16:09:15 來源:億速云 閱讀:661 作者:小新 欄目:web開發(fā)

這篇文章給大家分享的是有關html5中怎么獲取自定義屬性值的內容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。

自定義屬性:

在HTML5中我們可以自定義屬性,其格式如下data-*="",例如:data-info="我是自定義屬性",通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。

當我們如下格式設置時,則需要以駝峰格式才能正確獲取:data-my-name="itcast",獲取Node.dataset['myName']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--定義-->
<!--規(guī)范:
1.data-開頭
2.data-后必須至少有一個字符,多個單詞使用-連接
建議:
1.名稱應該都使用小寫--不要包含任何的大寫字符
2.名稱中不要有任何的特殊符號
3.名稱不要副作用純數字-->
<p data-school-name="itcast">傳智播客</p>
<p data-name="itcast">傳智播客</p>

<!--取值-->
<script>
    window.onload=function(){
        var p=document.querySelector("p");
        /*獲取自定義屬性值*/
        /*將data-后面的單詞使用camel命名法連接:必須使用camel合法法獲取值否則有可能無法獲取到值*/
        //var value=p.dataset["schoolname"];//data-schoolname    就是相當于上面的代碼塊來著同一個意思來著
        var value=p.dataset["schoolName"];//data-school-name     里面的取值必須第二個單詞。的第一個字母必須是大寫字母來著
        console.log(value);
    }
</script>
</body>
</html>

感謝各位的閱讀!關于html5中怎么獲取自定義屬性值就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI