js 取html自定义属性,JS操作html中的自定义属性

web.jpeg

自定义属性

程序开发中由开发者自己定义的属性

那么怎么添加自定义属性呢？怎么作用在标签上呢? JS提供设置和获取

自定义属性的方法

自定义属性的设置和获取

设置自定义属性:setAttribute("属性的名字","属性的值");

获取自定义属性的值:getAttribute("属性的名字")

• 人事部门
• IT部门
• 客服部门
• 产品部门
• 运维部门

//自定义属性:开发者自己添加的属性

//总结:设置自定义属性:setAttribute("属性的名字","属性的值");

//获取自定义属性的值:getAttribute("属性的名字")

var oul = document.getElementById("oul");

var lists = oul.getElementsByTagName("li");

for(var i = 0; i < lists.length; i ++){

//设置属性

lists[i].setAttribute("num", i + 1);

//获取属性值

lists[i].onclick = function(){

alert( this.getAttribute("num"));

}

console.log(lists[I]);

}

image.png

自定义属性的移除

removeAttribute("属性的名称"); 这个不仅可以移除自定义的属性，还可以移除系统的属性，比如移除class属性

小例子

体育

生活

军事

娱乐

• 这是体育频道
• 这是生活频道
• 这是军事
• 这是娱乐

//获取 btn元素对象

var btns = document.getElementById("btns");

var spans = btns.getElementsByTagName("span");

//获取li

var hd = document.getElementById("bd");

var lists = hd.getElementsByTagName("li");

console.log( lists);

//循环遍历

for(var i = 0; i < spans.length; i ++){

//给dom对象添加属性index

spans[i].setAttribute("index",i);

spans[i].onclick = function(){

console.log( this.getAttribute("index"));

//排他思想

for(var j = 0; j < spans.length; j ++){

//移除类样式

spans[j].removeAttribute("class");

lists[j].removeAttribute("class");

}

//获取属性

var num = this.getAttribute("index");

this.className = "current";

lists[num].className = "show";

}

}

例子.gif

上面的例子中我们，给标签设置了定义属性，如果我们安卓 下面的设置 属性，我们只是给 获取的DOM对象设置属性，没有作用在标签上，JS 是一门动态语言，就像我们在JS对象认知中提到的一样,可以给任意对象 动态的添加属性

image.png

image.png

给标签添加自定义属性

data-* 其中*是任意字符，如果*里面包含-会转化成驼峰命名法的字符串

//定义一个自定义属性

获取 dataset 是一个DOMStringMap对象

let oDiv = document.querySelector("div");

console.log(oDiv.dataset);

console.log(oDiv.dataset);

// 打印结果是:TT

image.png