此文以修改 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中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  2. JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法

    今天做了一个frameset的集合页面,其中有多个iframe页面,其中点击frame=leftMenu里的按钮元素后,需要修改frame=Header页面里的一个div元素属性. 1.主页面架构 & ...

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

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

  4. Selenium调用JavaScript修改元素属性

    修改元素的style,主要是将一些隐性元素显示出来,让元素可被操作: JavascriptExecutor  js = (JavascriptExecutor)driver; js.executeSc ...

  5. JS如何设置元素样式的方法示例

    <div id="box"></div> <script> var box = document.getElementById("bo ...

  6. js循环修改数组属性key值

    var keyMap = { deviceUid: "id", deviceType: "typeName", deviceCode: "code&q ...

  7. JavaScript 读取修改元素 及 伸拉门案例

    JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...

  8. Dom修改元素样式

    提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className    ...

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

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

随机推荐

  1. topcoder SRM 592 DIV2 LittleElephantAndPermutationDiv2

    #include <iostream> #include <vector> #include <algorithm> #include <iterator&g ...

  2. HDU 4649 Professor Tian(DP)

    题目链接 暴力水过的,比赛的时候T了两次,优化一下初始化,终于水过了. #include <cstdio> #include <cstring> #include <st ...

  3. COJ0700 数学（一）

    试题描述 现在有一大堆数,请你对这些数进行检验. 输入 第一行:CAS,代表数据组数(不大于500000),以下CAS行,每行一个数字,保证在64位长整形范围内,并且没有负数.你需要对于每个数字检验是 ...

  4. Java递归搜索指定文件夹下的匹配文件

    import java.io.File; import java.util.ArrayList; import java.util.List; import java.util.Queue; /** ...

  5. 【C语言】16-预处理指令2-条件编译

    条件编译的概念 在很多情况下,我们希望程序的其中一部分代码只有在满足一定条件时才进行编译,否则不参与编译(只有参与编译的代码最终才能被执行),这就是条件编译. 一.基本用法 1 #if 条件1 2 . ...

  6. Ubuntu 14.04 LTS 下 android 2.3.5 源码编译过程

    Ubuntu 14.04 LTS 下 android 2.3.5 源码编译过程   在新的Ubuntu 64位系统下去编译早期的安卓源码是会出现很多问题的,因为64位系统在安装完成后,很多32位的兼容 ...

  7. [转]如何：定义和处理 SOAP 标头

    本文转自:http://msdn.microsoft.com/zh-cn/library/vstudio/8728chd5(v=vs.100).aspx 本主题专门介绍一项旧有技术.现在应通过使用以下 ...

  8. CodeForces 625A 思维

    题意是说一个人喝酒 有两种办法 买塑料瓶的 a块钱 喝了就没了 或者是买玻璃瓶的b块钱 喝完还能卖了瓶子c块钱 求最多能喝多少瓶 在开始判断一次 a与b-c的关系 即两种方式喝酒的成本 如果a< ...

  9. maven资源文件的相关配置

    构建Maven项目的时候,如果没有进行特殊的配置,Maven会按照标准的目录结构查找和处理各种类型文件. src/main/java和src/test/java  这两个目录中的所有*.java文件会 ...

  10. error while loading shared libraries: xxx.so.x" 错误的原因和解决办法

    今天在执行一个protobuf程序时,提示error while loading shared libraries: libprotobuf.so.8: cannot open shared obje ...