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