js/jQuery獲取data-*屬性值


下面就詳細介紹四種方法獲取><li id="getId" >"122" >"11">獲取id</li>,需要獲取的就是>dtat-vice-id的值

 

一:getAttribute()方法

const getId = document.getElementById('getId'); // //getAttribute()取值屬性 console.log(getId.getAttribute(">//122 console.log(getId.getAttribute(">//11 // //setAttribute()賦值屬性 getId.setAttribute(">"48"); console.log(getId.getAttribute(">//48 

 

二:dataset()方法

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

 

三:jquery data()方法

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

jquery data 是一種緩存機制

用法如下:

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

品牌vi設計公司http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

四:jquery attr()方法

var id = $("#getId").attr(">//122 var viceId = $("#getId").attr(">//11 //賦值 $("#getId").attr(">"100");//100


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM