JS實現(xiàn)獲取自定義屬性data值的方法示例
更新時間：2018年12月19日 08:41:44 作者：天涯海角路
這篇文章主要介紹了JS實現(xiàn)獲取自定義屬性data值的方法,結合實例形式較為詳細的分析了javascript針對自定義屬性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測試上述代碼可得如下運行結果：
jQuery的data方法
var $tree = $('#tree');
console.log($tree.data("plant-height"));
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼可得如下運行結果：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
unicloud云開發(fā)進階獲取首頁列表數(shù)據(jù)示例詳解
這篇文章主要為大家介紹了unicloud云開發(fā)進階獲取首頁列表數(shù)據(jù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
JavaScript實現(xiàn)的級聯(lián)算法示例【省市二級聯(lián)動功能】
這篇文章主要介紹了JavaScript實現(xiàn)的級聯(lián)算法,結合省市二級聯(lián)動下拉菜單功能實例分析了javascript事件響應與元素動態(tài)操作實現(xiàn)級聯(lián)算法的相關技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)水平垂直滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
每周一練 之 數(shù)據(jù)結構與算法（Stack）
這篇文章主要介紹了數(shù)據(jù)結構與算法（Stack），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
怎么樣讓多個輸入框中的內容同時變化？一般又要兼容IE與firefox2010-01-01
做一個彈出dialog時用到了取父頁面的寬度和高度的方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JS中關于filter()方法的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)PC端和移動端刮卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了微信小程序使用車牌號輸入法的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了javascript html5實現(xiàn)表單驗證的具體代碼，感興趣的小伙伴們可以參考一下2016-03-03