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 ...
随机推荐
- Redis（2015.08.03笔记一）
一.redis简介 Redis是一种面向"键/值"对数据类型的内存数据库,可以满足我们对海量数据的读写需求. redis的键只能是字符串 redis的值支持多种数据类型: 1:字符 ...
- 阿里安卓面试分析: Android应用的闪退(crash)问题跟踪和解析
一:问题描述 闪退(Crash)是客户端程序在运行时遭遇无法处理的异常或错误时而退出应用程序的表现,请从crash发生的原因分类与解决方法.在出现crash后如何捕捉并分析异常这两个问题给出自己 ...
- Grunt usemin
yeoman/grunt-usemin 用来将 HTML 文件中(或者 templates/views)中没有优化的 script 和 stylesheets 替换为优化过的版本. usemin 暴露 ...
- flask-mail发送QQ邮件代码示例（亲测可行）
from flask import Flask from flask_mail import Mail, Message app = Flask(__name__) app.config.update ...
- wamp虚拟服务器
1.安装好wampServer 2.修改配置文件包含 vhosts 文件,操作: 打开apache的配置文件httpd.conf,并去掉#Include conf/extra/httpd-vhosts ...
- React文档翻译系列（三）JSX简介
# React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...
- C#封装MongoDB工具类库
什么是MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供可扩 ...
- CDIF：基于JSON的SOA软件框架
通用设备互联框架(CDIF)是一个具备中美知识产权保护的,基于web的连接框架,目前有部分开源实现存放在: GitHub - out4b/cdif: Common device interconnec ...
- 老李分享知识：性能测试之TPS和吞吐率
老李分享知识:性能测试之TPS和吞吐率 当增大系统的压力(或添加并发用户数)时,吞吐率和TPS的改变曲线呈大体一致,则系统基本稳定. 若压力增大时,吞吐率的曲线添加到一定程度后出现改变缓 ...
- android中的 Toast 和 AlertDialog
Toast 一般用来显示一些不需要用户操作的提示信息,举个栗子: public void toast(String msg) { //---创建并设置显示的内容和显示时长 Toast toast = ...