仅记录学习的新知识和示例，无干货。

1.setAttribute和getAttribute          （Attribute：属性）

setAttribute：为元素添加指定的属性，并为其赋值；如果指定的属性已经存在，则仅设置或改变它的值。

调用方法：element.setAttribute(attributeName,attributeValue)

这是一个方法，无返回值，IE8及以下不支持。

getAttribute：返回指定属性名的属性值。

调用方法：element.getAttribute(attributeName)

返回值为字符串

总结：attributeName为元素的属性名，attributeValue为元素的属性值，二者均为字符型

示例：

  1.  var comm={
  2.      //setAttr为对象comm的一个方法，用于给元素设置属性
  3.      //e为形参，代表元素名称；strName为形参，代表所设置属性的名称；strValue为形参，代表所设置属性的值
  4.      setAttr:function(e,strName,strValue){
  5.          e.setAttribute(strName,strValue);
  6.      },
  7.      //getAttr为对象comm的一个方法，用于获取元素属性
  8.      //e为形参，代表元素名称；strName为形参，代表所设置属性的名称，无值
  9.      getAttr:function(e,strName){
  10.          return e.getAttribute(strName);
  11.      }
  12.  }

以上为自定义一个对象用于给元素设置属性的方法。

调用上诉对象实现元素属性的改变示例如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <script type="text/javascript" src=../../js/system.js></script>
  6.      <title></title>
  7.      <style type="text/css">
  8.          .red{
  9.              width: 260px;
  10.              height: 100px;
  11.              line-height: 100px;
  12.              text-align: center;
  13.              border: solid 1px red;
  14.              margin: auto;
  15.          }
  16.          .blue{
  17.              width: 260px;
  18.              height: 100px;
  19.              line-height: 100px;
  20.              text-align: center;
  21.              border: solid 1px blue;
  22.              margin: auto;
  23.          }
  24.      </style>
  25.  </head>
  26.  <body>
  27.  <div id="a" class="red">hello,Js!</div>
  28.  <div id="b">hello,Js2!</div>
  29.  <br/>
  30.  <input type="button" value="点我变色" id="bitRed"/>
  31.  <script type="text/javascript">
  32.      //定义一个变量clasName，用于保存使用comm.getAttr获取的ID号为a的元素的class属性值
  33.      var clasName =comm.getAttr($$("a"),"class");
  34.      //调用comm.serAttr函数为ID号为b的元素设置class属性，属性值为clasName，既a的class属性值
  35.      comm.setAttr($$("b"),"class",clasName);
  36.      //设定ID号为bitRed的元素的点击事件
  37.      $$("bitRed").onclick=function(){
  38.          //为元素设置属性
  39.          //console.log()方法用于检测是否绑定成功，可删除
  40.          console.log("123");
  41.          //为ID为a的元素设置样式,括号内实参分别对应形参e,strName,strValue
  42.          comm.setAttr($$("a"),"class","blue");//属性名，属性值
  43.          //定义一个变量clasName，用于保存使用comm.getAttr获取的ID号为a的元素的class属性值
  44.          //此变量clasName为局部变量，与上一个不同
  45.          var clasName =comm.getAttr($$("a"),"class");
  46.          //调用comm.serAttr函数为ID号为b的元素设置class属性，属性值为clasName，既a的class属性值
  47.          comm.setAttr($$("b"),"class",clasName);
  48.      }
  49.  </script>
  50.  </body>
  51.  </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 ）的更多相关文章

  1. JavaScript常用的方法和函数（setInterval和setTimeout）

    1.setInterval:计时器 可以按照指定的周期(以毫秒为单位)来调用函数或计算表达式 调用格式:setinterval(fun,time) 说明:fun为函数体,time为数值,这两个参数是必 ...

  2. JavaScript常用工具方法

    JavaScript常用工具方法 1.日期格式化 2.将日期字符串转换为Date,字符串格式为(yyyy-mm-dd hh:mm:ss) 3.JS获取当天00:00:00时间和23:59:59的时间 ...

  3. 2、JavaScript常用互动方法

    一.输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用“”括起,直接输出" ...

  4. JavaScript常用数组方法

    JavaScript数组方法有以下这些: forEach() 方法对数组的每一个元素执行一次提供的函数. map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变. filter( ...

  5. JavaScript常用工具方法封装

    因为工作中经常用到这些方法,所有便把这些方法进行了总结. JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype. ...

  6. JavaScript常用DOM操作方法和函数

    查找节点ocument.querySelector(selectors) //接受一个CSS选择器作为参数,返回第一个匹配该选择器的元素节点.document.querySelectorAll(sel ...

  7. JavaScript常用的方法

    indexOf() 功能:indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引. 语法:indexOf(searchValue, fromIndex) searchValue ...

  8. Javascript 常用扩展方法

    这篇文章纯粹是为了保存这些方法,供以后翻阅,其实一直保存在 evernote 里面,但觉得还是放到对的地方会好点. 现在收录的很少,希望以后会慢慢增多. 数组扩展 contains,remove 扩展 ...

  9. javascript常用对象方法

    concat:连接产生一个新数组 [1,2].concat([3,4])     >> [1, 2, 3, 4] filter:返回符合条件的一个新数组 [1,2,3,4,5].filte ...

随机推荐

  1. 【Java基础】 Java动态代理机制

    在Java的动态代理机制中,有两个重要的类.一个是InvocationHandler,另一个是Proxy. InvocationHandler:每一个动态代理类都必须要实现InvocationHand ...

  2. Oracle函数整理

    ) from dual;--绝对值 ,) from dual;--取模,取余数 select ceil (12.1) from dual;--去上限值 select floor (12.1) from ...

  3. 浅谈java类集框架和数据结构(2)

    继续上一篇浅谈java类集框架和数据结构(1)的内容 上一篇博文简介了java类集框架几大常见集合框架,这一篇博文主要分析一些接口特性以及性能优化. 一:List接口 List是最常见的数据结构了,主 ...

  4. iOS中书写代码规范35条小建议

    1.精简代码, 返回最后一句的值,这个方法有一个优点,所有的变量都在代码块中,也就是只在代码块的区域中有效,这意味着可以减少对其他作用域的命名污染.但缺点是可读性比较差 NSURL *url = ({ ...

  5. PID控制算法研究

    1.matlab模糊控制工具箱:http://blog.csdn.net/gameboy12615/article/details/6367459 2.书籍:先进PID控制MATLAB仿真/刘金琨著 ...

  6. Jackson序列化实例

    参考文章 Jackson使用ContextualSerializer在序列化时获取字段注解的属性 使用BeanSerializerModifier定制jackson的自定义序列化(null值的处理) ...

  7. c中的可重入和不可重入函数

    可重入和不可重入 的基本概念 ---简介--- 可重入函数主要用于多任务环境中,一个可重入的函数简单来说就是可以被中断的函数,也就是说,可以在这个函数执行的任何时刻中断它,转入OS调度下去执行另外一段 ...

  8. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  9. linux C/C++ 日志打印函数

    //宏定义日志文件名 #define PROCESSNAME  "log_filename" //当日志文件大于5M时,会删除该文件,该接口使用方法 参照printfvoid Wr ...

  10. 【BFS + Hash】拼图——携程2017春招编程题2

    写在前面 前天参加了携程的网测--还是感觉自己太!渣!了!    _(:з」∠)_ 时光匆匆啊,已经到了开始思考人生的时候了(算了不矫情了)--总之写个博客来督促一下自己.之前太懒了,很多时候都是输在 ...