JS實(shí)現(xiàn)獲取自定義屬性data值的方法示例
本文實(shí)例講述了JS實(shí)現(xiàn)獲取自定義屬性data值的方法。分享給大家供大家參考，具體如下：
HTML部分：
<div id="tree" data-leaves="47" data-plant-height="2.4m"></div>
js部分：
var tree = document.getElementById("tree");
//getAttribute()取值屬性
console.log(tree.getAttribute("data-leaves"));
console.log(tree.getAttribute("data-plant-height"));
//setAttribute()賦值屬性
tree.setAttribute("data-leaves","48");
//data-前綴屬性可以在JS中通過dataset取值，更加方便
console.log(tree.dataset.leaves);
console.log(tree.dataset.plantHeight);
//賦值
tree.dataset.plantHeight = "3m";
tree.dataset.leaves--;
//新增data屬性
tree.dataset.age = "100";
//刪除，設(shè)置成null，或者delete
tree.dataset.leaves = null;
delete tree.dataset.age;
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼可得如下運(yùn)行結(jié)果：
jQuery的data方法
var $tree = $('#tree');
console.log($tree.data("plant-height"));
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼可得如下運(yùn)行結(jié)果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js的壓縮及jquery壓縮探討(提高頁面加載性能/保護(hù)勞動(dòng)成果)
搞定js的加密和壓縮，一方面可以提高頁面加載性能，另外一方面也希望辛苦研發(fā)出來的成果得到一定的保護(hù),感興趣的朋友可以了解下，或許對你有所幫助2013-01-01
js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法
這篇文章主要介紹了js+html5獲取用戶地理位置信息并在Google地圖上顯示的方法,涉及html5元素的操作技巧,需要的朋友可以參考下2015-06-06
淺析jsopn跨域請求原理及cors（跨域資源共享）的完美解決方法
由于同源策略的緣故，ajax不能向不同域的網(wǎng)站發(fā)出請求。接下來通過本文給大家介紹jsopn跨域請求原理及cors（跨域資源共享）的完美解決方法,需要的朋友可以參考下2017-02-02
js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式舉例
在JavaScript中將圖片的絕對路徑轉(zhuǎn)換為base64字符串或blob對象,是常見的圖片上傳前的預(yù)處理步驟,這篇文章主要介紹了js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式,需要的朋友可以參考下2025-04-04
uniapp在開發(fā)app時(shí)上傳文件時(shí)的問題記錄
在開發(fā)uniapp應(yīng)用時(shí),可能會(huì)遇到文件上傳功能在iOS和部分Android手機(jī)上不兼容的問題,經(jīng)過對比分析,發(fā)現(xiàn)問題可能出在文件的路徑上,通過使用uni.saveFile方法保存文件后,再上傳可以解決問題,這篇文章詳細(xì)介紹了解決方案,并引導(dǎo)讀者參考更多相關(guān)內(nèi)容2024-09-09
詳解JavaScript中Proxy與Object.defineProperty的區(qū)別
Proxy和Object.defineProperty都是JavaScript中用于實(shí)現(xiàn)對象屬性攔截和代理的機(jī)制，但它們在功能和應(yīng)用方面有一些區(qū)別，本文通過代碼示例詳細(xì)介紹了二者的區(qū)別,感興趣的朋友可以參考下2023-06-06
這篇文章主要介紹了Bootstrap風(fēng)格的zTree右鍵菜單功能，實(shí)現(xiàn)代碼分為html，css和js三部分，代碼簡單易懂，非常不錯(cuò)，需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JS實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法
今天小編就為大家分享一篇LayUi中接口傳數(shù)據(jù)成功,表格不顯示數(shù)據(jù)的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08