JS JQuery獲取data-*屬性值方法解析
下面就詳細(xì)介紹四種方法獲取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中通過(guò)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//刪除,設(shè)置成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 是一種緩存機(jī)制
用法如下:
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()的值進(jìn)行修改并不會(huì)影響到DOM元素上的data-*屬性的改變。data()的本質(zhì)其實(shí)是將一個(gè) “cache” 附加到了對(duì)象上,并使用了一個(gè)特殊的屬性名稱(chēng)。所以上述代碼中,雖然對(duì)div進(jìn)行了data()賦值操作,但HTML代碼中div的data-appid的值仍然為123,因?yàn)閐ata()只是修改了緩存的那個(gè)值,此時(shí)進(jìn)行$(’#myDiv’).data('appid')的操作,輸出的結(jié)果為666.
四:jquery attr()方法
var id = $('#getId').attr('data-id'); //122var viceId = $('#getId').attr('data-vice-id'); //11//賦值$('#getId').attr('data-id','100');//100
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享2. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)3. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)4. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能5. vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決6. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)財(cái)務(wù)記賬管理系統(tǒng)7. asp批量添加修改刪除操作示例代碼8. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論9. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向10. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享

網(wǎng)公網(wǎng)安備