此文以修改 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. c++ map和mutimaps 插入值

    (1)运用value_type std::map<std::string, float> col1; col1.insert(std::map<std::string,float&g ...

  2. TYVJ P1032 零用钱 Label：贪心

    背景 USACO OCT09 7TH 描述 作為创造產奶纪录的回报,Farmer John决定开始每个星期给Bessie一点零花钱. FJ有一些硬币,一共有N (1 <= N <= 20) ...

  3. TYVJ P1091 等差数列 Label：dp

    背景 广东汕头聿怀初中 Train#3 Problem 3 描述 等差数列的定义是一个数列S,它满足了(S[i]-S[i-1]) = d (i>1).显然的一个单独的数字或者两个数字也可以形成一 ...

  4. 转载 模板整理 by gc812

    http://www.cnblogs.com/gc812/p/5779789.html 上友链,不盗版 CC BY-NC-SA

  5. BestCoder Round #73

    这场比赛打完后可以找何神玩了orz(orz)* T1Rikka with Chess 嘿嘿嘿.输出n/2+m/2即可. 我能说我智商捉鸡想了4min吗? T2Rikka with Graph 由于N个 ...

  6. SecureCrt脚本（一）顶级对象之Crt

    Crt自动化 测试 SecureCrt脚本 JS脚本   1.引言 2.关于脚本表头 3.顶级对象'crt'的子属性和方法 3.1.属性 3.1.1.Dialog 3.1.2.Screen 3.1.3 ...

  7. Symantec Liveupdate Administrator的搭建

      1. My Symantec Products 选择需要更新的产品 2. Source Servers 选择ftp, 下载比较稳定 3. Distribute Center 类似于WSUS中的ap ...

  8. 5. Configure the Image Service

    Controller Node: 1. sudo apt-get install glance python-glanceclient   2. sudo vi /etc/glance/glance- ...

  9. BZOJ 2120 数颜色（带修改的莫队）

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MB Submit: 3478  Solved: 1342 [Submit][Status][Discus ...

  10. 使用Eclipse开发Java Web过程中Debug调试的使用方法

    里介绍的是在Eclipse中的Debug调试. 首先右击项目选择Debug As -- Debug on Server 或者点击Server面板的小昆虫图标,启动Debug模式. 运行web项目,进行 ...