Question

我需要将html标签中的元素颜色从黑色更改为红色并再次返回黑色。我有一个简单的按钮可以添加1。

<html>
<head>
<body>
    <div id="e">0</div>
    <input type="button" onclick="foo()" value="Ok">

    <script>
        var e = 0
        function foo(){
            kak = document.getElementById('e').innerHTML = e += 1
        }   
    </script>

</body>
</html>

Answer 1

我会通过在元素中添加一个类来解决这个问题，然后通过css将该类与颜色样式联系起来。这是我正在谈论的一个例子。

<html>
  <head>
    <style>
      #input-button { background-color: black; color: white; }
      #input-button.red { background-color: red }
    </style>
  </head>
  <body>
    <div id="e">0</div>
    <input id="input-button" type="button" onclick="foo()" value="Ok">

    <script>
      var e = 0
      function foo(){
        var el = document.getElementById('e');
        el.innerHTML = e += 1;

        var button = document.getElementById('input-button');
        button.classList.add('red');

        // setTimeout begins a timer, and I pass 500ms. To
        // make this longer, increase the number below
        setTimeout(function(){
          button.classList.remove('red');
        }, 500)

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

这是一个例子 jsfiddle

当我按下按钮时，如何更改html标签中的颜色？

1 个答案: