JS-002-修改元素属性（以按钮示例）
此文以修改 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-修改元素属性（以按钮示例）的更多相关文章
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- js控制html元素的readonly属性
html元素假设为只读,那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入. 初始时,两个输入框都是只读.点击change按钮后, ...
- js动画之获取元素属性
首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...
- JavaScript--DOM修改元素的属性
一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...
- js内置构造函数属性修改问题
在学习js原型时遇到一个问题,Array,Object等内置构造函数部分属性无法修改,我猜测可能是因为浏览器实现的原因造成的. 1.修改name属性无效. <script type=" ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...
随机推荐
- Atitti 载入类的几种方法    Class.forName ClassLoader.loadClass  直接new
Atitti 载入类的几种方法 Class.forName ClassLoader.loadClass 直接new 1.1. 载入类的几种方法 Class.forName ClassLo ...
- 原生js实现放大镜效果
今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...
- RCP：拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- Android Paint类方法说明
* Paint类介绍 * * Paint即画笔,在绘图过程中起到了极其重要的作用,画笔主要保存了颜色, * 样式等绘制信息,指定了如何绘制文本和图形,画笔对象有很多设置方法, * 大体上可以分为两类, ...
- json-jsonConfig使用
一,setCycleDetectionStrategy 防止自包含 /** * 这里测试如果含有自包含的时候需要CycleDetectionStrategy */ public static void ...
- java中"与"和"或"
在java中"与"和"或"都具有短路功能. 关于"或"运算如 if(mc == null || mc.getReceive()==0){ / ...
- A/D转换实验
实验效果:
- iOS开发-pod install 出错 The dependency `AFNetworking (~> 2.6.0)` is not used in any concrete target.
低版本的cocoapods的Podfile文件pod install可以正常运行 platform :ios, '8.0' pod 'AFNetworking' 高版本的cocoapods的Podfi ...
- 【转载】Linux中强大且常用命令：find、grep
转载自:http://www.linuxeden.com/html/softuse/20130804/142065.html 在linux下面工作,有些命令能够大大提高效率.本文就向大家介绍find. ...
- android 三种弹出框之一PopupWindow
PopupWindow 在android的弹出框我目前了解到的是有三种:AlertDialog,PopupWindow,Activity伪弹框, AlertDialog太熟悉了,这里就不介绍了 就先看 ...