此文以修改 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操作DOM元素属性和方法

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

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

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

  3. js控制html元素的readonly属性

    html元素假设为只读,那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入. 初始时,两个输入框都是只读.点击change按钮后, ...

  4. js动画之获取元素属性

    首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...

  5. JavaScript--DOM修改元素的属性

    一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...

  6. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  7. 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

    引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...

  8. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  9. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

随机推荐

  1. Swift3.0P1 语法指南&mdash;&mdash;下标

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  2. MongoDB数据库的操作,增删改查

    在student集合中插入一些数据 db.student.insert({ "学号":10010, "姓名":"德莱文", "年龄 ...

  3. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  4. ecshop /includes/lib_base.php、/includes/fckeditor/editor/dialog/fck_spellerpages/spellerpages/server-scripts/spellchecker.php Backdoor Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 ECShop是国内一款流行的网店管理系统软件,其2.7.3版本某个补丁存 ...

  5. How can I fix “Compilation unit name must end with .java, or one of the registered Java-like extensions”?

    How can I fix “Compilation unit name must end with .java, or one of the registered Java-like extensi ...

  6. Python的平凡之路(7)

    一.面向对象高级语法部分   1.静态方法.类方法.属性方法                                                                       ...

  7. AC日记——机器翻译 洛谷 P1540

    题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...

  8. String类常用方法。

    一,字符数组与字符串. 一个字符串可以变成一个字符数组,同样,一个字符数组可以变成一个字符串. 在String类中提供了以下操作方法. 1)将字符串变成字符数组:public char[] toCha ...

  9. 我的Windows naked apps

    0. 驱动精灵全能网卡版 1. Microsoft Office 2010/2013 2. IE 11 3. Filezilla Client & Server 4. Google Chrom ...

  10. CVE-2015-7547

    危险漏洞补丁修复通知 漏洞编号 漏洞编号为CVE-2015-7547 漏洞说明: Google安全团队近日发现glibc存在的溢出漏洞. glibc的DNS客户端解析器中存在基于栈的缓冲区溢出漏洞.当 ...