此文以修改 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. [Cocos2d-x For WP8]Effects 特效

    Effects是特殊类型的action.与修改常规的属性如透明度,位置,旋转或缩放等不同,它们修改的是一种新类型的属性:grid属性.grid属性像是一个模型,是一个线条交叉的网格,具体表现是一系列的 ...

  2. jsp页面中的代码执行加载顺序介绍

    1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. 2. j ...

  3. javascript事件大全4

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  4. 我装GitHub的过程

    GitHub是老师推荐的没正真的使用过,这次安装也是按提示的,不知对否,且还没使用,只是记录一下自己的过程.我是在线安装的. 1.下载GitHub安装问价,双击开始安装 2.出现的可能是系统相关配置吧 ...

  5. sheet目标数据插入函数主键模块

    #coding:gbk #导入处理excel的模块 import xlrd #定义哪些字段需要判断,只支持时间字段 toSureColArray = ['CREATE_TIME','MODIFY_TI ...

  6. WBS练习

    我们把这次团队程序设计分成了6个模块,让每一个同学都能参与其中,然后让每一个人选一个自己喜欢的模块,最后数据库设计这个部分就大家一起来做. Everybody's task allocation is ...

  7. Git Shell使用笔记

    1,首次打开Git shell错误(以前打开过gethub客户端) 警告: git command could not be found. Please create an alias or add ...

  8. linux查看时间和修改时间

    查看当前时间,date -R 设置时间 date -s 例如当前时间2014年11月3日17:22:48 date -s 11/3/2014 date -s 17:22:48 先设置日期后设置具体时间 ...

  9. thrift

    环境准备: 1.下载window版本的thrift编译器 2.下载idea的thirft插件 3.设置thrift编译工具为:步骤1下载的编译器 4.编写thrift文件 namespace java ...

  10. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...