此文以修改 button 元素属性（例如：添加属性、修改属性、修改颜色样式、边框样式等）为简单示例，演示 js 修改 HTML 元素属性的基本方法，敬请参阅。若有不足之处敬请指正，不胜感激！
多不闲述，就此上码。
HTML 源码如下所示：
1 <html>
2 <head>
3 <meta charset=‘utf-8‘>
4
5 <title>JS-002-JavaScript 操作常见 web 元素之二-修改元素属性（以按钮示例）</title>
6 <script type="text/javascript" src="common.js"></script>
7 <script type="text/javascript" src="test.js"></script>
8
9 <link rel="stylesheet" type="text/css" href="global.css">
10 </head>
11
12 <body>
13 <div id="button">
14 <h4>按钮操作：</h4>
15 <li>var btn = document.getElementById(‘button‘).getElementsByTagName(‘input‘)[0]</li>
16 <li>1、添加属性：btn.id="btn"</li>
17 <li>2、添加属性：btn.setAttribute("name", "btn_name")</li>
18 <li>3、添加属性：btn.setAttribute("class", "a_class")，class用第一种方法无法添加</li>
19 <li>4、修改字体颜色：btn.style.color = ‘red‘</li>
20 <li>5、修改边框样式：btn.style.border = ‘3px solid blue‘</li>
21 <br>
22
23 <input type="button" value="JavaScript操作按钮实例" onclick="btn_op()">
24 </div>
25
26 <div>
27 <br><br><br><br>
28 <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>
29 </div>
30 </body>
31 </html>
Chrome 中显示如下所示：
相应调用的 js 源码如下所示：
1 // 按钮操作：添加属性
2 function btn_op(){
3 var btn = document.getElementById(‘button‘).getElementsByTagName(‘input‘)[0];
4
5 btn.id="btn";
6 btn.setAttribute("name", "btn_name");
7 btn.setAttribute("class", "a_class");
8
9 // 修改属性的值，仅需重新赋值即可
10 btn.setAttribute("class", "a_class-01");
11
12 btn.style.color = ‘red‘;
13 btn.style.border = ‘3px solid blue‘;
14 }
点击按钮后，页面显示效果如下所示：
其他 HTML 元素属性的修改方法与上述均有相通之处，各位小主可自行进一步尝试，谢谢！
至此， JS-002-JavaScript 操作常见 web 元素之二-修改元素属性（以按钮示例） 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。
最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^
时间： 2024-08-25 05:10:14