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

如果想获取这个属性值,要使用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>

猜你喜欢

转载自blog.csdn.net/mintsolace/article/details/94491324
今日推荐