JavaScript If/Else 样式改变

Question

我对更改 <p> 的文本颜色的简单 if/else 语句有疑问元素取决于当前颜色。我明白为什么我会得到某些结果，但我似乎找不到解决方案。

var test = 1;

function one() {  
    x.style.fontSize = "18px";
    x.style.color    = "black";
}

function two() {
    x.style.fontSize = "18px";
    x.style.color    = "red";
}

function three() { 
    var x = document.getElementById("demo");
    if (test % 2 == 0) {
        one();
    } else {
        two();
    }
    test = test + 1;
}

<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="three()">Click Me!</button>

如能为我这样的新手提供任何帮助，我们将不胜感激。

Answer 1

您可以使用 getComputedStyle获取元素的颜色。

window.getComputedStyle(x, null).color

由于 color 的值'demo' 元素的属性尚未初始化，它包含对应于黑色的默认值 rgb(0, 0, 0)。

请参阅下面的在两种颜色之间切换的示例:

var black = 'rgb(0, 0, 0)';
var red = 'rgb(255, 0, 0)';

function toggleColor() {
  var x = document.getElementById("demo");
  var currentColor = window.getComputedStyle(x, null).color;

  if(currentColor === black) {
    x.style.color = red;
  } else {
    x.style.color = black;
  } 
}

<p id="demo">
  JavaScript can change the style of an HTML element.
</p>
<input type="button" onclick="toggleColor()" value="Toggle Color">