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