【Web】Web-API（No.59）自定义属性

最新推荐文章于 2025-04-15 17:33:35 发布

Sherry Lupus

最新推荐文章于 2025-04-15 17:33:35 发布

阅读量156

点赞数

分类专栏： Web-API 文章标签： Web API

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/99409505

版权

Web-API 专栏收录该内容

16 篇文章

订阅专栏

自定义属性

在这里插入图片描述
需要素材点击图片联系我或私信、评论

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
</head>
<body>
<ul id="uu">
    <li id="maId1" score="98">A</li>
    <li id="maId2" score="69">B</li>
    <li score="77">C</li>
    <li score="56">D</li>
    <li score="80">E</li>
    <li score="119">F</li>
    <li score="146">G</li>
</ul>
<script src="common.js"></script>
<script>
    /*
    * 本身html标签没有这个属性，是我们自己加的 --> 自定义属性/目的：
    * 获取自定义属性对应的值 getAttribute（“自定义属性的名”）
    * 设置自定义属性 setAttrubute（“属性名”，“属性值”）
    * 移除自定义属性 removeAttribute（“属性的名字”） 可以移除自带的属性
    * */
    for(var i = 0; i < ele$("li").length; i++){
        ele$("li")[i].setAttribute("index",i);
        ele$("li")[i].onclick = function(){
            console.log(this.getAttribute("index"));
            this.removeAttribute("id");

            //设置类名 className
            this.className = "";
        }
    }
</script>
</body>
</html>