此文以修改 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（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

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

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

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

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

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

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

  7. js内置构造函数属性修改问题

    在学习js原型时遇到一个问题,Array,Object等内置构造函数部分属性无法修改,我猜测可能是因为浏览器实现的原因造成的. 1.修改name属性无效. <script type=" ...

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

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

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

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

随机推荐

  1. 一个技术汪的开源梦 —— 公共组件缓存之分布式缓存 Redis 实现篇

    Redis 安装 & 配置 本测试环境将在 CentOS 7 x64 上安装最新版本的 Redis. 1. 运行以下命令安装 Redis $ wget http://download.redi ...

  2. CCF 201512-4 送货(错误）

    直接用DFS深搜,检查了好久没能发现错误,贴上来以后慢慢看... /* DFS深度优先搜索 Edge保存边 u{v,been} cnt记录走过的街道 如果没有就return ;继续递归 */ #inc ...

  3. python集合

    集合的创建:set()和frozenset() 区别:frozenset()创建不可变的集合,一旦创建其元素不可改变:而set()创建的集合中的元素可以通过一定的方法进行改变. >>> ...

  4. HDU 1251统计难题

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  5. [1015][JSOI2008]星球大战starwar（并查集）

    1015: [JSOI2008]星球大战starwar Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 2124  Solved: 909[Submit] ...

  6. 【转】android UI进阶之自定义组合控件

    [源地址]http://blog.csdn.net/notice520/article/details/6667827 好久没写博客了.实在是忙不过来,不过再不总结总结真的不行了.慢慢来吧,有好多需要 ...

  7. Linux C 文件与目录3 文件读写

    文件读写 文件读写是指从文件中读出信息或将信息写入到文件中.Linux文件读取可使用read函数来实现的,文件写入可使用write函数来实现.在进行文件写入的操作时,只是在文件的缓冲区中操作,可能没有 ...

  8. java编译做了哪些事？

    Javac编译器,主要做了如下的事情:1.解析与填充符号表:    2.注解处理器:    3.语义分析与字节码生成:        3.1.标注检查        3.2.数据及控制流分析      ...

  9. Apache Commons 工具集使用简介

    Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.我选了一些比较常用的项目做简单介绍.文中用了很多网上现成的东西,我只是做了一个汇总整理. 一.Comm ...

  10. 7z 压缩命令行工具

    命令行压缩解压一 7z 1) 简介7z,全称7-Zip, 是一款开源软件.是目前公认的压缩比例最大的压缩解压软件.主页:http://www.7-zip.org/中文主页:http://7z.spar ...