JavaScript之自定义属性

最新推荐文章于 2022-02-26 10:01:40 发布

转载最新推荐文章于 2022-02-26 10:01:40 发布 · 428 阅读

文章标签：

#javascript

JavaScript基础专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用JavaScript为HTML元素添加自定义属性，并演示了通过这些属性实现按钮内容动态更新的方法。

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

JavaScript之自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    window.onload = function(){
        var aBtn = document.getElementsByTagName(input);
        for (var i = 0; i < 3; i ++){
            aBtn[i].abc = 123;
        }
    }
</script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
</body>
</html>

for (var i = 0; i < 3; i ++){
aBtn[i].abc = 123;
}
在每一个按钮后面添加了一个自定义的属性，可以进行读写操作；

自定义的应用1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    window.onload = function(){
        var aBtn = document.getElementsByTagName('input');
        var arr = ['A','B','C','D'];

        for (var i =0; i < aBtn.length; i++) {
            aBtn[i].num = 0;

            aBtn[i].onclick = function(){
                this.value = arr[this.num];
                this.num ++;
                if (this.num == arr.length) {
                    this.num = 0;
                };
            }
        }
    }
</script>
</head>
<body>
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
</body>
</html>