Javascript，使用 if 语句更改元素的颜色

Question

如果颜色从深红色变为白色，我不知道如何更改元素的颜色。这让我感到困惑，因为我尝试了很多解决方案，例如将它们变成变量。谁能告诉我我做错了什么，或者可能指出正确的方向？我试过“重复”的问题，但 none 确实有相同的问题。

<button class="btn-startcall10" onclick="recorda()"><i class="fa fa-wave-square"></i> </button>

  function recorda() {
    document.getElementsByClassName("fa-wave-square")[0].style.color = "crimson";
      if () {}
  }

Answer 1

您可以在 javascript 中使用 Element.style.color 来获取元素的当前颜色。

然后您可以根据该颜色更改元素的颜色。

let clickElement = document.getElementById("span-to-change-color");

clickElement.addEventListener("click", changeColor);

function changeColor() {

  if (clickElement.style.color == "red") {
    clickElement.style.color = "blue";
  } else {
    clickElement.style.color = "red";
  }
}

<span style="color: red;" id="span-to-change-color">I am red(Click Me)</span>

Answer 2

你可以试试这个

 function changeColor(){
    el = document.getElementById("fa-wave-square");
  if(el.style.color === 'crimson'){
    el.style.color = 'white';
  } else {
    el.style.color = 'crimson';
  }
 }

https://jsfiddle.net/Lyuvf9a6/3/

Answer 3

首先你必须为点击事件添加一个事件监听器，例如

YOUR_ELEMENT.addEventListener("click", YOUR_LISTENER) // e.g recorda

您的事件侦听器将从您可以访问该对象的位置获取事件对象，但如果它是嵌套对象，例如您的事件侦听器在 div 上，但您在内部有一个跨度，点击跨度点击事件将被触发，目标对象将是跨度。但是您可以缓存 YOUR_ELEMENT 并使用它。

现在您可以检查颜色的样式颜色并根据需要进行操作。

if (YOUR_ELEMENT.style.color === 'crimson') {
  YOUR_ELEMENT.style.color = 'white'
} else {
  YOUR_ELEMENT.style.color = 'crimson'
}

这是示例代码，例如

<div id="textChange">Some text</div>
<script>
  var elem = document.getElementsById('textChange')
  function changeColor(e) {
    // You can use and get elem using
    // var ele = e.target
    // Or as we have cached elem we can use that

    if (elem.style.color === 'red') {
      elem.style.color = 'green'
    } else {
      elem.style.color = 'red'
    }
  }

  elem.addEventListener('click', changeColor)
</script>

Javascript，使用 if 语句更改元素的颜色

Javascript, change colour of element on-click with if-statement

javascript

styles

if-statement

styling