JavaScript常用的方法和函数（setAttribute和getAttribute ）

时间：2023-04-02 20:14:08

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

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中存储的属性。

相关文章