Javascript——自定义属性操作和移除

最新推荐文章于 2024-02-01 22:05:42 发布

原创最新推荐文章于 2024-02-01 22:05:42 发布 · 346 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

本文详细介绍了如何在HTML元素中设置、获取和移除自定义属性。通过JavaScript的setAttribute、getAttribute和removeAttribute方法，可以轻松地对元素进行属性的动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果想获取这个属性值，要使用getAttribute(“自定义属性名字”)

<ul>
    <li age="25">wyx</li>
    <li age="29">wxy</li>
    <li age="43">cxh</li>
    <li age="21">lhr</li>
</ul>
<script src="common.js"></script>
<script>
    //获取所有li标签
    var list=document.getElementsByTagName("li");
    for(var i=0; i<list.length; i++){
        list[i].onclick=function(){
            //alert(this.score);
            alert(this.getAttribute("age"));
        };
    }
</script>

设置自定义属性：setAttribute(“属性的名字”，“属性的值”)；

<body>
<ul>
    <li age="25">wyx的年龄</li>
    <li age="29">wxy的年龄</li>
    <li age="43">cxh的年龄</li>
    <li age="21">lhr的年龄</li>
</ul>
<script src="common.js"></script>
<script>
//根据id获取ul标签，并且获得该标签中所有的li
var list=document.getElementsByTagName("li");
//循环遍历
for(var i=0; i<list.length; i++){
    //先为每个li添加自定义属性
    //list[i].score=(i+1)*10; //此方式，自定义属性在DOM对象上，不在标签中
    list[i].setAttribute("age", (i+1)*10);

    //点击每个li标签，显示对应的自定义属性值
    list[i].onclick=function(){
        alert(this.getAttribute("age"));
    };
}
</script>
</body>

移除自定义属性：removeAttribute

<head>    
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .cls{
            background-color: green;
        }
    </style>
</head>
<body>
	<input type="button" value="移除自定义属性" id="btn"/>
	<div id="dv" score="10" class="cls"></div>
	<script src="common.js"></script>
	<script>
    	//移除自定义属性：removeAttribute("属性的名字")
    	//点击按钮移除元素的自定义属性
    	my$("btn").onclick=function(){
        	//my$("dv").removeAttribute("score");
        	//移除元素的类样式
        	//值没有了，但属性还有
        	//my$("dv").className="";
        	//也可以移除元素自带属性
        	my$("dv").removeAttribute("class");
    	};
	</script>
</body>