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