jquery 獲取data 屬性值

2021-09-24 05:24:50 字數 1633 閱讀 8940

html5規定可以為元素新增非標準型的屬性,只需新增字首data-,這些屬性可以隨意新增,隨意命名,目的是為元素提供與渲染無關的資訊,或提供語義資訊。

iefirefox

chrome

safari

opera

支援支援

支援支援

支援所有主流瀏覽器都支援 data-* 屬性。

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

獲取id

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

一:getattribute()方法

const getid = document.getelementbyid('getid');

// //getattribute()取值屬性

console.log(getid.getattribute("data-id"));//12

console.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);//12

//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"); //12

var viceid = $("#getid").data("vice-id"); //11

//賦值

$("#getid").data("id","100");//100

四:jquery attr()方法

var id = $("#getid").attr("data-id"); //122

var viceid = $("#getid").attr("data-vice-id"); //11

//賦值

$("#getid").attr("data-id","100");//100

以上內容來自多個部落格總結,多謝博主的幫助

jquery 獲取data 屬性值

html5規定可以為元素新增非標準型的屬性,只需新增字首data 這些屬性可以隨意新增,隨意命名,目的是為元素提供與渲染無關的資訊,或提供語義資訊。getid data id 122 data vice id 11 獲取id const getid document.getelementbyid g...

獲取data 屬性值

下面就詳細介紹四種方法獲取data 屬性的值 getid data id 122 data vice id 11 獲取id 需要獲取的就是data id和dtat vice id的值 一 getattribute 方法 const getid document.getelementbyid geti...

jquery獲取html屬性值

jquery獲取html標籤自定義屬性值或data值 獲取屬性值 1 id text value 帥帥的男神 jquery取值 text attr value 獲取自定義屬性值 2 id text value 123 data obj 帥帥的男神 jquery取值 text attr data ob...