第一次更改顏色后，輪廓顏色閃爍的JavaScript setInterval不起作用

Question

我正在嘗試每2秒更改H1元素的輪廓顏色。 因此，我使用了這段JavaScript代碼...但是它只從黃色變為橙色一次，並一直保持在橙色狀態。 如何使它在兩種顏色之間閃爍？ 請以JS術語而不是JQuery庫響應

這是我的JavaScript代碼，我是JS的新手：

var myVar = setInterval(function(){ colorFlicker() }, 2000);

function colorFlicker(){
    var y = document.getElementById("mainH1");
    y.style.outlineColor = y.style.outlineColor == "#ff944d" ? "#d9ff66": "#ff944d";
  }

Answer 1

請勿檢查javascript中的顏色，返回的顏色取決於瀏覽器，在舊版瀏覽器中通常為rgb(200,33,33)或rgba(244,22,244,1)甚至十六進制格式，請使用標志代替

 var myVar = setInterval(colorFlicker, 500); var flag = true; function colorFlicker() { var y = document.getElementById("mainH1"); y.style.outlineColor = flag ? "#d9ff66" : "#ff944d"; flag = !flag; } 

 #mainH1 {outline: 2px solid #ff944d;} 

 <h1 id="mainH1">TEST</h1> 

Answer 2

使用rgb()作為默認顏色，然后調整您的條件：

 var myVar = setInterval(colorFlicker, 1000); function colorFlicker() { var y = document.getElementById("mainH1"); y.style.outlineColor = y.style.outlineColor == "rgb(255, 148, 77)"?"#d9ff66":"rgb(255, 148, 77)"; } 

 h1 { outline-style: dotted; outline-color: rgb(255, 148, 77); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 id='mainH1'>mainH1</h1> 

Answer 3

樣式更改應使用CSS處理。 然后，您可以使用JavaScript安全地切換將CSS樣式附加到元素的類：

/* css */
#mainH1 { outline: /* some color */ }
#mainH1.alternateColor { outline: /* some other color */ }

// JS
var y = document.getElementById("mainH1");
function colorFlicker(){
  y.classList.toggle('alternateColor');
}