JavaScript常用的方法和函数（setAttribute和getAttribute ）
仅记录学习的新知识和示例，无干货。
1.setAttribute和getAttribute （Attribute：属性）
setAttribute：为元素添加指定的属性，并为其赋值；如果指定的属性已经存在，则仅设置或改变它的值。
调用方法：element.setAttribute(attributeName,attributeValue)
这是一个方法，无返回值，IE8及以下不支持。
getAttribute：返回指定属性名的属性值。
调用方法：element.getAttribute(attributeName)
返回值为字符串
总结：attributeName为元素的属性名，attributeValue为元素的属性值，二者均为字符型
示例：
var comm={
//setAttr为对象comm的一个方法，用于给元素设置属性
//e为形参，代表元素名称；strName为形参，代表所设置属性的名称；strValue为形参，代表所设置属性的值
setAttr:function(e,strName,strValue){
e.setAttribute(strName,strValue);
},
//getAttr为对象comm的一个方法，用于获取元素属性
//e为形参，代表元素名称；strName为形参，代表所设置属性的名称，无值
getAttr:function(e,strName){
return e.getAttribute(strName);
}
}
以上为自定义一个对象用于给元素设置属性的方法。
调用上诉对象实现元素属性的改变示例如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src=../../js/system.js></script>
<title></title>
<style type="text/css">
.red{
width: 260px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px red;
margin: auto;
}
.blue{
width: 260px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px blue;
margin: auto;
}
</style>
</head>
<body>
<div id="a" class="red">hello,Js!</div>
<div id="b">hello,Js2!</div>
<br/>
<input type="button" value="点我变色" id="bitRed"/>
<script type="text/javascript">
//定义一个变量clasName，用于保存使用comm.getAttr获取的ID号为a的元素的class属性值
var clasName =comm.getAttr($$("a"),"class");
//调用comm.serAttr函数为ID号为b的元素设置class属性，属性值为clasName，既a的class属性值
comm.setAttr($$("b"),"class",clasName);
//设定ID号为bitRed的元素的点击事件
$$("bitRed").onclick=function(){
//为元素设置属性
//console.log()方法用于检测是否绑定成功，可删除
console.log("123");
//为ID为a的元素设置样式,括号内实参分别对应形参e,strName,strValue
comm.setAttr($$("a"),"class","blue");//属性名，属性值
//定义一个变量clasName，用于保存使用comm.getAttr获取的ID号为a的元素的class属性值
//此变量clasName为局部变量，与上一个不同
var clasName =comm.getAttr($$("a"),"class");
//调用comm.serAttr函数为ID号为b的元素设置class属性，属性值为clasName，既a的class属性值
comm.setAttr($$("b"),"class",clasName);
}
</script>
</body>
</html>
此示例的要求是为ID为a的元素设置样式，ID为b的元素样式跟随元素a的样式，点击按钮，元素a的样式发生改变，同时元素b的样式随之改变。
开始定义一个全局变量clasName，并调用comm对象的getAttr方法获取元素a的属性，并使用comm对象的setAttr方法为元素b设置属性，达到开始元素b属性跟随元素a的要求。然后再点击事件中，首先调用comm对象的srtAttr方法为元素a设置新的属性，并定义局部变量clasName存储使用comm对象的getAttr方法得到的a的属性，再给b设置局部变量clasName中存储的属性。
JavaScript常用的方法和函数（setAttribute和getAttribute ）的更多相关文章
- JavaScript常用的方法和函数（setInterval和setTimeout）
1.setInterval:计时器 可以按照指定的周期(以毫秒为单位)来调用函数或计算表达式 调用格式:setinterval(fun,time) 说明:fun为函数体,time为数值,这两个参数是必 ...
- JavaScript常用工具方法
JavaScript常用工具方法 1.日期格式化 2.将日期字符串转换为Date,字符串格式为(yyyy-mm-dd hh:mm:ss) 3.JS获取当天00:00:00时间和23:59:59的时间 ...
- 2、JavaScript常用互动方法
一.输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出" ...
- JavaScript常用数组方法
JavaScript数组方法有以下这些: forEach() 方法对数组的每一个元素执行一次提供的函数. map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变. filter( ...
- JavaScript常用工具方法封装
因为工作中经常用到这些方法,所有便把这些方法进行了总结. JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype. ...
- JavaScript常用DOM操作方法和函数
查找节点ocument.querySelector(selectors) //接受一个CSS选择器作为参数,返回第一个匹配该选择器的元素节点.document.querySelectorAll(sel ...
- JavaScript常用的方法
indexOf() 功能:indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引. 语法:indexOf(searchValue, fromIndex) searchValue ...
- Javascript 常用扩展方法
这篇文章纯粹是为了保存这些方法,供以后翻阅,其实一直保存在 evernote 里面,但觉得还是放到对的地方会好点. 现在收录的很少,希望以后会慢慢增多. 数组扩展 contains,remove 扩展 ...
- javascript常用对象方法
concat:连接产生一个新数组 [1,2].concat([3,4]) >> [1, 2, 3, 4] filter:返回符合条件的一个新数组 [1,2,3,4,5].filte ...
随机推荐
- echarts柱图自定义为硬币堆叠的形式
看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8) 要想实现这样展示效果.我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echart ...
- MySql Table错误：is marked as crashed and last (automatic?) 和 Error: Table "mysql"."innodb_table_stats" not found
一.mysql 执行select 的时候报Table错误:is marked as crashed and last (automatic?) 解决方法如下: 找到mysql的安装目录的bin/myi ...
- Intellij IDEA中文乱码解决
界面乱码 原因:IDEA默认设置界面的字体不支持中文 解决:修改为支持中文的字体,建议字体Microsoft Yahei UI.大小11,具体操作File -> Setting -> Ap ...
- response.getWriter().write()与out.print()的区别(转)
1.首先介绍write()和print()方法的区别: (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等 (2).print():可以将各种类型(包括Object)的数据通 ...
- MongoDB基础教程系列--第四篇 MongoDB 查询文档
查询文档 查询文档可以用 find() 方法查询全部文档,可以用 findOne() 查询第一个文档,当然还可以根据 条件操作符 和 $type操作符 查询满足条件的文档. find() 和 find ...
- WPF之路二： button添加背景图片点击后图片闪烁问题
在为button添加背景图片的时候,点击后发现图片闪烁,我们仔细观察,其实Button不仅仅只是在点击后会闪烁,在其通过点击或按Tab键获得焦点后都会闪烁,而通过点击其他按钮或通过按Tab键让Butt ...
- 采用Spring AOP+Log4j记录项目日志
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6567672.html 项目日志记录是项目开发.运营必不可少的内容,有了它可以对系统有整体的把控,出现任何问题 ...
- vim中文帮助文档安装
vim自带的帮助手册是英文的, 对平时编程的人来说没有多大阅读困难,在何况还有"星级译王"呢, 但是我猜和我一样连英语四级都愁的大有人,可偏偏就有一帮好心人人将其翻译成了中文, 可 ...
- windows下nginx的安装及使用方法入门
nginx功能之一可以启动一个本地服务器,通过配置server_name和root目录等来访问目标文件 一. 下载 http://nginx.org/ 下载后解压 二. 修改配置文件 ngin ...
- ios 检测屏幕方向
方法一:通知中心监听 name: // UIDeviceOrientationDidChangeNotification 允许方向改变的情况下,监听设备方向,与电池条无关 // UIApplica ...