web.jpeg
自定义属性
- 程序开发中由开发者自己定义的属性
那么怎么添加自定义属性呢？怎么作用在标签上呢? JS提供设置和获取
自定义属性的方法
自定义属性的设置和获取
- 设置自定义属性:
setAttribute("属性的名字","属性的值");
获取自定义属性的值:getAttribute("属性的名字")
<body>
<ul id="oul">
<li>人事部门</li>
<li>IT部门</li>
<li>客服部门</li>
<li>产品部门</li>
<li>运维部门</li>
</ul>
</body>
<script>
//自定义属性:开发者自己添加的属性
//总结:设置自定义属性: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]);
}
</script>
image.png
自定义属性的移除
-
removeAttribute("属性的名称");这个不仅可以移除自定义的属性，还可以移除系统的属性，比如移除class属性
小例子
<body>
<div id="box" class="clearfix">
<div id="btns">
<span class="current">体育</span>
<span>生活</span>
<span>军事</span>
<span>娱乐</span>
</div>
<div id="bd">
<ul>
<li class="show">这是体育频道</li>
<li>这是生活频道</li>
<li>这是军事</li>
<li>这是娱乐</li>
</ul>
</div>
</div>
</body>
<script>
//获取 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";
}
}
</script>
例子.gif
上面的例子中我们，给标签设置了定义属性，如果我们安卓 下面的设置 属性，我们只是给 获取的DOM对象设置属性，没有作用在标签上，JS 是一门动态语言，就像我们在JS对象认知中提到的一样,可以给
任意对象动态的添加属性
image.png
image.png
给标签添加自定义属性
-
data-*其中*是任意字符，如果*里面包含-会转化成驼峰命名法的字符串
//定义一个自定义属性
<div data-my-name="TT"></div>
- 获取
dataset是一个DOMStringMap对象
<script>
let oDiv = document.querySelector("div");
console.log(oDiv.dataset);
console.log(oDiv.dataset);
// 打印结果是:TT
</script>
image.png
