js獲取標簽元素data-*屬性值的4種方法
更新時間：2022年06月01日 11:25:14 作者：彭世瑜
這篇文章主要分享了js獲取標簽元素data-*屬性值的4種方法，標簽上有兩個屬性??data-id????和???data-user-name??,?需要通過js去獲取，下面文章具體介紹需要的小伙伴可以參考一下
前言:
標簽上有兩個屬性??data-id??? 和 ??data-user-name??, 需要通過js去獲取
<style>
#user::before {
content: attr(data-id);
}
#user::after {
content: attr(data-user-name);
}
</style>
<div id="user" data-id="666" data-user-name="Tom"></div>方式一：dataset
let user = document.querySelector("#user");
// 取值 中劃線要轉(zhuǎn)為駝峰命名法
console.log(user.dataset.id); // 666
console.log(user.dataset.userName); // Tom
// 賦值
user.dataset.id = 777;
user.dataset.userName = "Jack";
// 新增屬性
user.dataset.age = 23;
// 刪除屬性
delete user.dataset.userName;
// <div id="user" data-id="777" data-age="23"></div>方式二： getAttribute/setAttribute/removeAttribute
let user = document.querySelector("#user");
// 取值
console.log(user.getAttribute("data-id")); // 666
console.log(user.getAttribute("data-user-name")); // Tom
console.log(typeof user.getAttribute("data-id")); // string
// 賦值
user.setAttribute("data-id", 777);
// 新增屬性
user.setAttribute("data-age", 23);
// 刪除屬性
user.removeAttribute("data-user-name");
// <div id="user" data-id="777" data-age="23"></div>方法三：jQuery.attr
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let user = $('#user');
// 取值
console.log(user.attr("data-id")); // 666
console.log(user.attr("data-user-name")); // Tom
// 賦值
user.attr("data-id", 777);
// 新增屬性
user.attr("data-age", 23);
// 刪除屬性
user.removeAttr("data-user-name");
// <div id="user" data-id="777" data-age="23"></div>
</script>方法四：jQuery.data
注意：$.data()的值進行修改并不會影響到DOM元素上的data-*屬性的改變
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let user = $("#user");
// 取值
console.log(user.data("id")); // 666
console.log(user.data("user-name")); // Tom
// 賦值
user.data("id", 777);
// 新增屬性
user.data("age", 23);
// 刪除屬性
user.removeData("user-name");
console.log(user.data());
// {id: 777, age: 23, userName: 'Tom'}
// data() 操作沒有影響到dom元素的屬性變化
// <div id="user" data-id="666" data-user-name="Tom"></div>
</script>到此這篇關(guān)于js獲取標簽元素data-*屬性值的4種方法的文章就介紹到這了,更多相關(guān)js獲取data-*屬性值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript利用fetch實現(xiàn)異步請求的方法實例
傳遞信息到服務(wù)器，從服務(wù)器獲取信息，是前端發(fā)展的重中之重，尤其是現(xiàn)在前后端分離的大前提下，前后端的數(shù)據(jù)交互是前端的必修科目了，下面這篇文章主要給大家介紹了關(guān)于JavaScript利用fetch實現(xiàn)異步請求的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
這篇文章主要為大家詳細介紹了JS實現(xiàn)排行榜文字向上滾動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
詳解ES6 export default 和 import語句中的解構(gòu)賦值
這篇文章主要介紹了詳解ES6 export default 和 import語句中的解構(gòu)賦值，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
javascript簡化代碼 A=alert w=document.writeln
建議不要這樣寫代碼,考慮以后的修改才是最重要的,代碼分層.多把一個功能寫成一個js代碼或一個類,然后提供接口,這種寫法代碼會更多,速度也更慢,但人人都推薦這樣寫,是因為這樣子維護方便.而程序不可能一次性寫得完美的,永遠都可以改進2008-02-02
這篇文章主要介紹了JS實現(xiàn)圖片幻燈片效果代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2020-05-05
本文主要介紹了Javascript變量函數(shù)聲明提升深刻理解，Javascript變量函數(shù)聲明提升Hoisting是在Javascript中執(zhí)行上下文工作方式的一種認識，更多相關(guān)知識需要的小伙伴可以參考下面文章詳細內(nèi)容2022-06-06
這篇文章主要介紹了詳解小程序緩存插件(mrc)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Layui框架的table.render方法是用于渲染表格的核心功能,通過配置對象定義表格樣式、列和數(shù)據(jù)源,cols數(shù)組中的每個對象通過field屬性與數(shù)據(jù)源綁定,指定要顯示的數(shù)據(jù)字段,本文給大家介紹Layui?table.render的使用,感興趣的朋友一起看看吧2024-09-09
javascript頁面上使用動態(tài)時間具體實現(xiàn)
這篇文章主要介紹了javascript在頁面上使用動態(tài)時間實現(xiàn)示例,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了JS實現(xiàn)點擊登錄彈出窗口同時背景色漸變動畫效果,涉及JavaScript基于鼠標事件及時間函數(shù)定時觸發(fā)形成漸變動畫的相關(guān)技巧,需要的朋友可以參考下2016-03-03