JavaScript If / Else 样式改变

Question

我在使用简单的 if/else 语句时遇到问题，该语句根据当前颜色更改 <p> 元素的文本颜色。我明白为什么我得到了某些结果，但我似乎找不到解决方案。

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，style用于内联CSS。

Answer 2

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

window.getComputedStyle(x, null).color

由于您的 'demo' 元素的 color 属性的值尚未初始化，因此它包含对应的默认值 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">

Answer 3

你可以使用一个变量来缓存当前颜色，例如：

(function(){
  var color = 'red';

  var demoEl = document.getElementById("demo");
  demoEl.addEventListener('click', function(e) {
      if (color === 'red') {
          demoEl.style.color = 'black';
          color = 'black';    // set current color
      } else {
          demoEl.style.color = 'red';
          color = 'red';
      }
  }, false);
})();

<p id="demo">JavaScript can change the style of an HTML element.</p>

JavaScript If / Else 样式改变

JavaScript If / Else style changing

javascript

css

if-statement

onclick