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

最新推荐文章于 2022-10-07 19:03:02 发布

遊愙

最新推荐文章于 2022-10-07 19:03:02 发布

阅读量537

点赞数

分类专栏： JavaScript 基础文章标签： JavaScript 提取行间事件优先级

本文链接：https://blog.csdn.net/baidu_37639000/article/details/70843891

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

基础

1 篇文章 0 订阅

订阅专栏

操作属性的两种方式：
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>