此文以修改 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. CentOS 下实现两台服务器之间的共享NFS

    NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind yum install ...

  2. jsoncpp代码实例

    最近开始使用 jsoncpp,以前一直在使用cJSON,但是使用cJSON的时候经常会忘记free掉json的内存,结果造成了内存泄露,程序跑着跑着就崩溃了.所以最近把json转移到了jsoncpp上 ...

  3. IE6不支持li:hover的解决办法，一句代码让IE6支持li：hover

    如果不是因为工作需要,我根本不会理会IE6的兼容问题,甚至我都不想理会IE的所有内核,不过IE9用了下,我还是重新对IE报以期待的.话题扯远了,下面回到话题上来吧.这次要说的内容就是,如果让IE支持l ...

  4. [转] - Linux网络编程 -- 网络知识介绍

    (一)Linux网络编程--网络知识介绍 Linux网络编程--网络知识介绍客户端和服务端         网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 客户 ...

  5. java语言中一些使用的小技巧（区别于c++）

    正在自学java中...想记录下java和c++在一些小的方面的不同点.(未完待续...) java中class的对象均是引用类型的,如果想把连个同类型的对象相关联起来,只要将一个赋值给另一个就可以了 ...

  6. html5文章 -- 应用HTML5 开发手机APP

    因为HTML5暂时无法短期内在PC普及,主要方向在使用高端浏览器的高端移动设备,所以可以用作开发Android系统的App.但只有Android2.2以上.iOS3.2以上均支持HTML5,两大平台有 ...

  7. jdk+myeclipse配置安装相关步骤

    1.JDK的安装JDK  版本:7u25  安装路径:c:\java(注意:装不装公共jre都可,自己可以选择安装到哪里)环境变量配置:(1)JAVA_HOME:C:\Java(就是你安装jdk的目录 ...

  8. checking在浏览器为应用缓存查找更新时触发

    离线的Web应用,就是在设备不能上网的时候还能运行应用.html5把离线应用作为重点,主要是开发人员的心愿.离线应用的开发的步骤有:首先应该知道设备是否能够上网;然后应该还能访问一定的资源(如图像.C ...

  9. 通过Sysprep封装系统

    <?xml version="1.0" encoding="utf-8"?> <unattend xmlns="urn:schema ...

  10. HDU 1166敌兵布阵+NOJv2 1025: Hkhv love spent money（线段树单点更新区间查询）

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...