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 ...
随机推荐
- JavaScript实现
JavaScript实现 Javascript实现虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多.没错, ...
- 移动web页面支持弹性滚动的3个方案
有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动we ...
- css3渐变生成器网页
http://westciv.com/tools/gradients/ http://www.colorzilla.com/gradient-editor/
- 《InsideUE4》UObject（五）类型系统信息收集
在一起!在一起! 引言 前文中我们阐述了类型系统构建的第一个阶段:生成.UHT分析源码的宏标记并生成了包含程序元信息的代码,继而编译进程序,在程序启动的时候,开始启动类型系统的后续构建阶段.而本文我们 ...
- css中的inline-block
div { display: inline-block; *display: inline; *zoom: 1; } Basic Support包含值:none | inline | block | ...
- sql server 重命名列（字段）
调用系统存储过程sp_rename,直接看代码: EXEC sp_rename 'myTable.oldName','newName','COLUMN' 如果重命名表,则: EXEC sp_re ...
- IOS开发创建开发证书及发布App应用(七)——在iTunes创建填写应用基本信息
7.在iTunes创建填写应用基本信息 依旧打开苹果的开发者网站 https://developer.apple.com/ 点击Member,如下图 (注意,下面的图示是登录之后的) 点击iTunes ...
- Dubbo配置方式详解
Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是阿里巴巴 SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次 ...
- Unix文件 I/O(不带缓冲区的)上
简介 Unix系统大多数文件i/o只需要:open.read.write.lseek.close这几个函数.但是某些时候我们也需要fcntl.ioctl.sync等函数配合使用.这些函数都是不带缓冲区 ...
- Hibernate（三）之配置文件详解
一.核心配置文件(hibernate.cfg.xml) <?xml version="1.0" encoding="UTF-8"?> <!DO ...