此文以修改 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. Android 与 IIS服务器身份验证

    1)基础验证: /** * 从服务器取图片 * * @param url * @return */ public void getHttpBitmap(final String url) { new ...

  2. TAT,我的LCT转双旋了

    这里是rotate和splay函数 void rotate(int x) { ]==x; ch[y][d^]=ch[x][d];pre[ch[x][d]]=y; ch[z][ch[z][]==y]=x ...

  3. jquery 获得多选框的值

    $('input[name="aihao"]:checked').each(function(){ str +=$(this).val()+','; selecthtml +='& ...

  4. hdu Robberies

    这道题目应该在理解上会有一点问题.这道题的概率不是用来加的,而是用来乘的.这道题要的是在能逃跑的前提下,获得的最大money,而题目中给的概率是被抓的概率,所以要先有一个预处理,之后只要列出状态转移方 ...

  5. jq实现多banner效果图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. Java接口、Java抽象类、C++抽象类的区别

    由于这三种数据类型都是为了创建类层次结构的顶层构架,且用法有些许相似之处,这里简单区分一下: 接口: 接口用interface关键字定义, 名字一般使用-able形式的形容词. 接口通常定义抽象方法和 ...

  7. 字体 font typograph

    https://en.wikipedia.org/wiki/Typeface *** 字体渲染 https://www.smashingmagazine.com/2012/04/a-closer-lo ...

  8. GWP PHP auth page works

    经过修改,看起来GWP能工作了.不过还是需要深入了解ca的page flow,PHP and Perl大不同 1015  ls /var/www/html/gwp/lib/database.php 1 ...

  9. Apache Spark源码走读之3 -- Task运行期之函数调用关系分析

    欢迎转载,转载请注明出处,徽沪一郎. 概要 本篇主要阐述在TaskRunner中执行的task其业务逻辑是如何被调用到的,另外试图讲清楚运行着的task其输入的数据从哪获取,处理的结果返回到哪里,如何 ...

  10. 让Win8自动登录免输入密码的小技巧

    按Win+R键,输出“netplwiz”,单击“确定”,弹出“用户帐户”窗口.将第一个画框上的勾选去掉——应用——弹出自动登录输入你的密码——确定——确定完成.重启看看电脑是不是不用输入密码也可以自动 ...