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

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. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  2. [UWP]了解模板化控件(2.1)：理解ContentControl

    UWP的UI主要由布局容器和内容控件(ContentControl)组成.布局容器是指Grid.StackPanel等继承自Panel,可以拥有多个子元素的类.与此相对,ContentControl则 ...

  3. dotweb——go语言的一个微型web框架（一）

    dotweb是16年正式托管到github的一个开源项目,go语言的web框架目前也有很多,出名的有bee和echo.它们都是很优秀的框架,但是我们喜欢更轻.更小的东西,经历一些之后我们更青睐微服务这 ...

  4. ie11强制兼容模式打开

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  5. 网页html结构搭建方法总结

    在div+css布局中,一般都这样来整体构架的: <div id="header"></div><div id="center"& ...

  6. 关于JavaScript中连等赋值那点事

    今天看了前端网上关于JS的题目,其中有一道题目挺有意思的.如下 var a = b =10; (function(){ var a = b = 20; })(); console.log(a); co ...

  7. [SinGuLaRiTy] 高精度算法代码库

    [SinGuLaRiTy-1001] Copyrights (c) SinGuLaRiTy 2017. All Rights Reserved. 加法: #include<stdio.h> ...

  8. H5与Android之间的交互

    关于Android与JS网页端的交互,网上有很多教程,刚做这功能,参考了多方资料,最终出来后觉得简单,但是为实现的话有诸多小问题,最终效果如下: 现在简单整理一下:(直接贴代码,注释详细,应该能懂的) ...

  9. Java面试题：写代码使得分别出现StackOverflowError和OutOfMemoryError

    转载自:http://www.cnblogs.com/xudong-bupt/p/3360206.html 今天做了个笔试,这是其中的一道题目:写代码使得分别出现StackOverflowError和 ...

  10. 抽象工厂模式（Abstract Factory）

    (二)抽象工厂模式(Abstract Factory) 1.抽象工厂模式(Abstract Factory),提供了一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 2.抽象工厂模式是 ...