此文以修改 button 元素属性（例如：添加属性、修改属性、修改颜色样式、边框样式等）为简单示例，演示 js 修改 HTML 元素属性的基本方法，敬请参阅。若有不足之处敬请指正，不胜感激！

多不闲述，就此上码。

HTML 源码如下所示：

 <html>
     <head>
         <meta charset='utf-8'>

         <title>JS-002-修改元素属性（以按钮示例）</title>
         <script type="text/javascript" src="common.js"></script>
         <script type="text/javascript" src="test.js"></script>

         <link rel="stylesheet" type="text/css" href="global.css">
     </head>

     <body>
          <div id="button">
             <h4>按钮操作：</h4>
             <li>var btn = document.getElementById('button').getElementsByTagName('input')[0]</li>
             <li>1、添加属性：btn.id="btn"</li>
             <li>2、添加属性：btn.setAttribute("name", "btn_name")</li>
             <li>3、添加属性：btn.setAttribute("class", "a_class")，class用第一种方法无法添加</li>
             <li>4、修改字体颜色：btn.style.color = 'red'</li>
             <li>5、修改边框样式：btn.style.border = '3px solid blue'</li>
             <br>

             <input type="button" value="JavaScript操作按钮实例" onclick="btn_op()">
         </div>

         <div>
             <br><br><br><br>
             <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>
         </div>
     </body>
 </html>

Chrome 中显示如下所示：

相应调用的 js 源码如下所示：

 // 按钮操作：添加属性
 function btn_op(){
     var btn = document.getElementById('button').getElementsByTagName('input')[0];

     btn.id="btn";
     btn.setAttribute("name", "btn_name");
     btn.setAttribute("class", "a_class");

     // 修改属性的值，仅需重新赋值即可
     btn.setAttribute("class", "a_class-01");

     btn.style.color = 'red';
     btn.style.border = '3px solid blue';
 }

点击按钮后，页面显示效果如下所示：

其他 HTML 元素属性的修改方法与上述均有相通之处，各位小主可自行进一步尝试，谢谢！

至此， JS-002-修改元素属性（以按钮示例） 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

JS-002-修改元素属性（以按钮示例）的更多相关文章

  1. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  2. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  3. js控制html元素的readonly属性

    html元素假设为只读,那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入. 初始时,两个输入框都是只读.点击change按钮后, ...

  4. js动画之获取元素属性

    首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...

  5. JavaScript--DOM修改元素的属性

    一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...

  6. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  7. 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

    引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...

  8. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  9. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

随机推荐

  1. 【腾讯Bugly干货分享】移动客户端中高效使用SQLite

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57b57f2a0703f7d31b9a3932 作者:赵丰 导语 iOS 程序能 ...

  2. TCP/IP模型详解

    上述为TCP/IP的协议模型,主机到网络层又被称为网络接口层,网络互联层又被称为网间层. 网络接口层:实际上,TCP/IP参考模型并没有真正描述这一层的实现,只是要求能够提供给其上层一个访问接口,以便 ...

  3. 浅析Java.lang.Runtime类

    一.概述      Runtime类封装了运行时的环境.每个 Java 应用程序都有一个 Runtime 类实例,使应用程序能够与其运行的环境相连接.      一般不能实例化一个Runtime对象, ...

  4. HTML5锚点请用id代替name

    HTML5已经去掉name属性,实现锚点时请使用id,实例效果:http://keleyi.com/keleyi/phtml/html5/9.htm 支持Chrome,火狐,IE8以上等浏览器. 以下 ...

  5. LVS+Keepalived负载均衡配置

    简介 lvs一般是和keepalived一起组合使用的,虽然也可以单独使用lvs,但配置比较繁琐,且可用性也没有前者高. lvs和keepalived组合使用后,配置lvs的VIP和负载均衡就都在ke ...

  6. FW: javascripts 要不要加引号

    Javascript编程风格  http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html 作者: 阮一峰 日期: ...

  7. Mysql :removeAbandonedTimeout:180

    #数据库链接超过3分钟开始关闭空闲连接 秒为单位 removeAbandonedTimeout:180 这个参数会是一个坑吗? http://www.oschina.net/question/1867 ...

  8. iptables用法

    iptables -t nat -A PREROUTING -s 10.10.10.0/24 -i eth1 -p tcp --dport 80 -j REDIRECT --to-ports 3128 ...

  9. 8天学通MongoDB——第一天 基础入门

    原文地址:http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.html 关于mongodb的好处,优点之类的这里就不说了,唯 ...

  10. Git教程(7)用合并还是变基？

    合并或变基前的样子:分支experiment与master两个分支都产生了提交. 图1. 未合并或变基前的样子 合并 原理: 找到两个分支的最末提交和最近的共同祖先,在执行git merge时所处的分 ...