下面就詳細介紹四種方法獲取><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