如何为 DOM 元素添加点击事件？

goldEli commented 4 years ago

完善以下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button style="color: green">点击</button>
  <script>  

    // 为 button 添加点击事件
    // 点击 button 后，button 文字变为红色，再次点击文字还原回绿色

  </script>
</body>
</html>

lurasso commented 4 years ago

<script type="text/javascript">  

    // 为 button 添加点击事件
    // 点击 button 后，button 文字变为红色，再次点击文字还原回绿色
    var btn  = document.getElementsByTagName('button')[0];
    var count = 0;
    btn.onclick = function(){
      if(count++ %2 == 0){
        btn.style.color = "red"
      }else{
        btn.style.color ="green"
      }
    }
  </script>

goldEli commented 4 years ago

<script type="text/javascript">  

    // 为 button 添加点击事件
    // 点击 button 后，button 文字变为红色，再次点击文字还原回绿色
    var btn  = document.getElementsByTagName('button')[0];
    var count = 0;
    btn.onclick = function(){
      if(count++ %2 == 0){
        btn.style.color = "red"
      }else{
        btn.style.color ="green"
      }
    }
  </script>

当未来你的 HTML 发生改变，你还需要去修改 js 所以获取 DOM 尽量用 ID

748580573 commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button style="color: green" onclick="changeColoe(this)">点击</button>
  <script>  

    // 为 button 添加点击事件
    // 点击 button 后，button 文字变为红色，再次点击文字还原回绿色
    var i = 0;

    var changeColoe = function(obj){
       i++;
       if((i%2) == 1){
        obj.style.color = 'red';
       }else{
        obj.style.color = 'green';
       }
    }

  </script>
</body>
</html>

lurasso commented 4 years ago

<script type="text/javascript">  

    // 为 button 添加点击事件
    // 点击 button 后，button 文字变为红色，再次点击文字还原回绿色
    var btn  = document.getElementsByTagName('button')[0];
    var count = 0;
    btn.onclick = function(){
      if(count++ %2 == 0){
        btn.style.color = "red"
      }else{
        btn.style.color ="green"
      }
    }
  </script>

当未来你的 HTML 发生改变，你还需要去修改 js 所以获取 DOM 尽量用 ID

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #green{
      color: green;
    }
    #red{
      color: red;
    }
  </style>
</head>
<body>
  <!-- 方法1 改变style属性
  <button  style="color: green">点击</button>
  <script type="text/javascript">  
    // 为 button 添加点击事件
    // 点击 button 后，button 文字变为红色，再次点击文字还原回绿色
    var btn  = document.getElementsByTagName('button')[0];
    var count = 0;
    btn.onclick = function(){
      if(count++ %2 == 0){
        btn.style.color = "red"
      }else{
        btn.style.color ="green"
      }
    } -->
  //方法2 改变id属性  改变class属性可以用div.className修改
  <button  id="green">点击</button>  
  <script type="text/javascript">
  var btn  = document.getElementsByTagName('button')[0];
  var count = 0;
  btn.onclick = function(){
    if(count++ %2 == 0){
    document.getElementById('green').id = 'red';
    }else{
      document.getElementById('red').id = 'green';
    }
  }

  </script>
</body>

goldEli commented 4 years ago

不建议去修改节点的id，id的功能就是用来获取dom的仅此而已
通过 class 或者 style 去修改 css 样式

各司其职

FireDragonZL commented 4 years ago

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn" style="color: green">点击</button>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                var style = window.getComputedStyle(btn, null);
                if(style.color == "rgb(0, 128, 0)"){
                    btn.style.color = "red";
                }else{
                    btn.style.color = "green";
                }
            }
        }
    </script>
</body>

</html>

goldEli / Front-End-Training

如何为 DOM 元素添加点击事件？ #22