下面就詳細介紹四種方法獲取data-*屬性的值

<li data- data-vice-id='11'>獲取id</li>

需要獲取的就是data-id 和 dtat-vice-id的值

一：getAttribute()方法

const getId = document.getElementById(’getId’);// //getAttribute()取值屬性console.log(getId.getAttribute('data-id'));//122console.log(getId.getAttribute('data-vice-id'));//11// //setAttribute()賦值屬性getId.setAttribute('data-id','48');console.log(getId.getAttribute('data-id'));//48

二：dataset()方法

//data-前綴屬性可以在JS中通過dataset取值，更加方便console.log(getId.dataset.id);//112//data-vice-id連接取值使用駝峰命名法取值 console.log(getId.dataset.viceId);//11//賦值getId.dataset.id = '113';//113getId.dataset.viceId--;//10//新增data屬性getId.dataset.id2 = '100';//100//刪除，設置成null，或者deletegetId.dataset.id2 = null;//nulldelete getId.dataset.id2;//undefind

三：jquery data()方法

var id = $('#getId').data('id'); //122var viceId = $('#getId').data('vice-id'); //11//賦值$('#getId').data('id','100');//100

jquery data 是一種緩存機制

用法如下：

data()方法//HTML代碼 <div data-appid='123' data-myname='lsxj' data-app- data-my-name='secondname'></div>//獲取屬性var appid = $('#myDiv').data('appid'); //123var app-id = $('#myDiv').data('app-id'); //456//屬性賦值 $('#myDiv').data('appid','666');//最終HTML代碼 <div data-appid='123' data-myname='lsxj' data-app- data-my-name='secondname'></div>需要注意的是，data()的值進行修改并不會影響到DOM元素上的data-*屬性的改變。data()的本質其實是將一個 “cache” 附加到了對象上，并使用了一個特殊的屬性名稱。所以上述代碼中，雖然對div進行了data()賦值操作，但HTML代碼中div的data-appid的值仍然為123，因為data()只是修改了緩存的那個值，此時進行$(’#myDiv’).data('appid')的操作，輸出的結果為666.

四：jquery attr()方法

var id = $('#getId').attr('data-id'); //122var viceId = $('#getId').attr('data-vice-id'); //11//賦值$('#getId').attr('data-id','100');//100

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。