如何重置我的 document.getElementById 顏色值

Question

我正在嘗試將顏色從紅色更改為藍色，但是當紅色變為不變時

var colorvalue=0;
var sizevalue;
function CG()
{
    colorvalue ++;
    if (colorvalue==0)
    {
        document.getElementById("testd").style.color = "blue";
    }
    else if(colorvalue==1)
    {
        document.getElementById("testd").style.color = "red";
    }
    if(colorvalue > 1)
    {
        colorvalue = 0;
    }
}

我已經得到了答案，但我如何有更多的顏色

感謝您看到我的問題，如果您這樣做，感謝您的回答

Answer 1

我編輯了一些你的代碼。 試試下面

var colorvalue=0;
var sizevalue;
function CG()
{
    colorvalue ++;
    if (colorvalue % 2 == 0)
    {
        document.getElementById("testd").style.color = "blue";
    }
    else
    {
        document.getElementById("testd").style.color = "red";
    }
}

使用模運算：所以如果有余數colorvalue ，元素將是紅色的。

Answer 2

另一種方法是使用 CSS，而不是使用 JavaScript 直接在元素上設置樣式。

用紅色初始化文本，然后使用classList打開/關閉藍色類。

 const test = document.querySelector('.test'); const button = document.querySelector('button'); button.addEventListener('click', handleClick, false); function handleClick() { test.classList.toggle('blue'); }

 .test { color: red; } .blue { color: blue; }

 <p class="test">This is a test</p> <button>Change color</button>