JavaScript-02-优先级/提取行间事件

来源：互联网发布：木马编程编辑：程序博客网时间：2024/06/05 15:40

操作属性的两种方式：
var element=document.getElementById(“div1”);
① element.style.width=”100px”;

② element[“style”][“width”]=”100px”;
[ ] 中括号内可以直接用字符串，也可以用变量代替。
方式①：代码简单易书写；
方式②：当需要修改的属性值不固定时可以用变量代替。

样式优先级：
通配符 * < 标签 < class < ID < 行间；
注：如果css中用.class 设置了属性，然后用JavaScript改变了元素的class，样式随之改变

    <style type="text/css">    .class1{      width:50px;       height:50px;      background:red;    }    .class2{      width:100px;      height:100px;      border:2px solid black;    }  </style>  <script type="text/javascript">  <!--    function f(){      var ele=document.getElementById("d1");  //  同优先级覆盖，样式变为 .class2{ } 中的样式      ele.className="class2";      alert(ele.className); //class2    }  //-->  </script>

style与className：
JavaScript操作元素的style都是修改行间样式；[如下图]

  <script type="text/javascript">  <!--    function f(){      var ele=document.getElementById("d1");      ele.style.width="100px";      ele.style.height="100px";      ele.style.background="blue";    }  //-->  </script>

元素原始行间样式
JavaScript设置了style后行间样式
因此如果对同一个元素，修改了style样式（即行间样式），再修改className将无效化，所以要注意：
① 修改元素尽量用同一个属性(优先级相同)，如前后修改都修改class，这样避免后来的修改无效；
② 且因优先级造成的样式无效没有任何错误提示，后期难以排查。

提取行间事件：
在多人共同开发环境下，行间事件容易被误删，或以邮箱邮件为例，行间事件数量繁多，操作繁复，因此需要提取。
提取行间事件方法：【以onclick事件为例】可用匿名函数

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <title>Document</title>  <style type="text/css">    .class1{      width:50px;      height:50px;      background:red;    }    .class2{      width:50px;      height:50px;      background:blue;    }  </style> </head> <body> <div id="d1" class="class1">    </div> <p></p>  <input id="b1" type="button" value="变蓝色"  />    <script type="text/javascript">    <!--        function functionName(){                    var b=document.getElementById("d1");          d1.className="class2";        }        var a=document.getElementById("b1");// 事件后面写函数名,不能含() 否则直接调用了,不管有木有触发点击事件        a.onclick=functionName;        /* 可以用匿名函数        a.onclick(){           ……         }    */    //-->  </script> </body></html>

注意：由于开始JavaScript代码写在head中，报下图错误 ↓
无法设置元素属性提示
遇到此提示判断代码没有书写格式错误的情况下一般是由script加载但是操作的元素未加载造成的。
JavaScript代码是顺序执行的，当执行到操作div属性的时候，还没有加载到此div对象，所以设置也就不能够成功，可以将JavaScript代码写在网页底端或者window.onload。
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况。

getElementsByTagNames(“标签名”)
例如邮箱的全选和邮件前的复选框，都是input标签，可以用div分开，然后：
var button1=document.getElementById(“ID_button1”);
var checkboxes=button1.getElementsByTagName(“input”);

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <script type="text/javascript">  <!--     window.onload=function(){     // 获取button       var oBtn1=document.getElementById("b1");       var oBtn2=document.getElementById("b2");       var oBtn3=document.getElementById("b3");//  全选函数       function AllChoose(){         var oDiv2=document.getElementById("div2");         var boxes=oDiv2.getElementsByTagName("input");         for(var i=0;i<boxes.length;i++){               boxes[i].checked=true;                    }        }// 反选函数        function Others(){         var oDiv2=document.getElementById("div2");         var boxes=oDiv2.getElementsByTagName("input");         for(var i=0;i<boxes.length;i++){               if(boxes[i].checked){                 boxes[i].checked=false;               }else{                 boxes[i].checked=true;               }                         }        }//  全部清除 函数        function Clear(){         var oDiv2=document.getElementById("div2");         var boxes=oDiv2.getElementsByTagName("input");         for(var i=0;i<boxes.length;i++){               boxes[i].checked=false;                   }        }  /*  在函数内设置点击事件不能带() 因此不能传参，方法相似不能共用同一个方法【待解决】 */      oBtn1.onclick=AllChoose;      oBtn2.onclick=Others;      oBtn3.onclick=Clear;     } // onload  //-->  </script> </head> <body> <div id="div1" class="">  <input id="b1" type="button" value="全选" />  <input id="b2" type="button" value="反选" />  <input id="b3" type="button" value="清空" /> </div>  <div id="div2" class="">    <input type="checkbox" id="" /><br>    <input type="checkbox" id="" /><br>    <input type="checkbox" id="" /><br>    <input type="checkbox" id="" /><br>    <input type="checkbox" id="" /><br>    <input type="checkbox" id="" /><br>    <input type="checkbox" id="" /><br>    <input type="checkbox" id="" /><br>  </div> </body></html>

0 0