獲取data 屬性值

2022-03-23 22:52:23 字數 1891 閱讀 5787

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

"

getid

" data-id="

122" data-vice-id="

11">獲取id

需要獲取的就是data-iddtat-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,或者delete

getid.dataset.id2 = null;//

null

delete getid.dataset.id2;//

undefind

三:jquery data()方法

var id = $("

#getid

").data("

id"); //

122var viceid = $("

#getid

").data("

vice-id

"); //

11//

賦值$("

#getid

").data("

id","

100");//

100

四:jquery attr()方法

var id = $("

#getid

").attr("

data-id

"); //

122var 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...

jquery 獲取data 屬性值

html5規定可以為元素新增非標準型的屬性,只需新增字首data 這些屬性可以隨意新增,隨意命名,目的是為元素提供與渲染無關的資訊,或提供語義資訊。iefirefox chrome safari opera 支援支援 支援支援 支援所有主流瀏覽器都支援 data 屬性。下面就詳細介紹四種方法獲取da...

跨視窗獲取data屬性

1.不同的視窗的jquery物件不同 2.data屬性是存到jquery物件當中的 3.跨視窗獲取data是獲取不到的 父視窗 each form input function index,elem 子視窗 var parentd parent.window.document each parent...