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 . 03 函数定义、函数参数（形参、实参）、函数的返回值、冒泡函数、函数的加载、局部变量与全局变量、隐式全局变量、JS预解析、是否是质数、斐波那契数列
1.1 知识点 函数:就是可以重复执行的代码块 2. 组成:参数,功能,返回值 为什么要用函数,因为一部分代码使用次数会很多,所以封装起来, 需要的时候调用 函数不调用,自己不会执行 同名函数会覆盖 ...
- VisualVM监控远程主机上的JAVA应用程序
使用VisualVM监控远程主机上JAVA应用程序时,需要开启远程主机上的远程监控访问,或者在远程JAVA应用程序启动时,开启远程监控选项,两种方法,选择其中一种就可以开启远程监控功能,配置完成后就可 ...
- MVC学习笔记3 - JsRender
许多发展平台减少代码和简化维护,使用模板和 HTML5 和 JavaScript 也不例外. JsRender 是一个 JavaScript 库使您可以一次定义一个样板文件结构,并使用它来动态地生成 ...
- SQL Server的学习
一.建库和表1.新建数据库语法: CREATE DATABASE SuperMarket//建立一个名为SuperMarket的数据库. 2.打开数据库语法: USE SuperMarket//打开刚 ...
- QQ登陆接口
这次做了一个QQ登陆接口---简单记录一下 遇到一大坑-----QQ互联里面添加应用的时候,是网站应用,配置回调地址一定要配置 准确,到指定回调页面 否则会出现问题的.
- Appium 解决手势密码 java
if(driver.getPageSource().contains("绘制解锁图案")){//检测是否是有手势密码出现 List<AndroidElement> el ...
- wamp2.4.4 如何配置虚拟主机及反向代理(解决跨域问题)
一.找到安装目录下的httpd.conf文件 1. 删除Include conf/extra/httpd-vhosts.conf前面的#号(开启虚拟主机的配置) 2. 删除LoadModule pro ...
- 性能测试分享：jmeter性能监控（一）
性能测试分享:jmeter性能监控(一) poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908 ...
- lumen 中的 .env 配置文件简介和适用场景
lumen 是 laravel 的衍生品,核心功能的使用和 laravel 都是一致的,但配置文件这一方面,lumen 在 laravel 的基础上增加了更简便的配置方式: lumen 采用了 Dot ...
- 使用U盘安装ubuntu 12.04（使用大白菜u盘启动工具）
家里有个u盘启动盘,用大白菜U盘工具做的. 1.把iso文件放到u盘里,把ISO文件中的casper目录下的vmlinuz和initrd拷贝到u盘根目录下: 2.修改启动顺序,选u盘启动: 3.启动时 ...