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

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 ）的更多相关文章

  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. 获取JVM的dump文件

    获取JVM的dump文件的两种方式 1. JVM启动时增加两个参数: #出现 OOME 时生成堆 dump: -XX:+HeapDumpOnOutOfMemoryError #生成堆文件地址: -XX ...

  2. js原生API----查找dom

    一.祖先接口Node,及他的扩展接口EventTarget Node是一个接口,许多DOM类型从这个接口继承,并允许类似地处理(或测试)这些各种类型. 以下接口都从Node继承其方法和属性: Docu ...

  3. 如何用Android Studio查看build.gradle源码

    上一篇博客里讲过 build.gradle 里的每一行代码基本都是在调用一个方法,既然是这样,我们就可以用 android studio(下面简称as) 去查看它源码的方法注释说明,这样就可以理解每个 ...

  4. 机器学习:Python实现最小均方算法(lms)

    lms算法跟Rosenblatt感知器相比,主要区别就是权值修正方法不一样.lms采用的是批量修正算法,Rosenblatt感知器使用的 是单样本修正算法.两种算法都是单层感知器,也只适用于线性可分的 ...

  5. Iterator 的hasNext方法和next方法

    这两个方法都有指向的移动,不同的是,一个返回boolean,一个返回对象: hasNext():判断当前元素是否存在,并没有指向的移动 next():返回当前元素, 并指向下一个元素 请看代码吧: L ...

  6. webp转png或jpg

    在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...

  7. 老李分享：webservice是什么？

    老李分享:webservice是什么?   前言 Web Services 是 Web 应用出于和其他 Web 应用以交互数据为目的的开放式标准(XML.SOAP.HTTP 等).Web Servic ...

  8. C# 快速高效率复制对象另一种方式 表达式树

    1.需求 在代码中经常会遇到需要把对象复制一遍,或者把属性名相同的值复制一遍. 比如: public class Student { public int Id { get; set; } publi ...

  9. php运算时默认的类型转换

    php属于弱类型语言,使用数据时无需指定其数据类型.对于学C语言入门的我,刚刚接触时感觉很神奇,但是随之而来的也有烦恼. 总结一下php中默认的类型转换,按照运算符类型,只总结能够自动做类型转换的运算 ...

  10. 【G】开源的分布式部署解决方案文档 - 部署Console & 控制负载均衡 & 跳转持续集成控制台

    G.系列导航 [G]开源的分布式部署解决方案 - 导航 设置项目部署流程 项目类型:选择Console,这个跟功能无关,只是做项目分类,后面会有后续功能 宿主:选择Console 部署方式:选择原始, ...