javascript - 使用 JavaScript 向 CSS id 添加属性

Question

我得到了一个简单的 JavaScript，它在单击链接时更改元素的内部 HTML，它看起来像这样:

function changeHeader(Index)
{
    var headers = new Array("Coffee tables","Side tables","Stand tables","Dinner tables","Stools","Pedestals");
    document.getElementById("header").innerHTML = headers[Index];

}

header 的 CSS 如下:

#header
{
    cursor: hand; 
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

HTML 基本上是这样的:

<p id="header">Press a link</p>
<a href=# onclick="changeHeader(1)">Coffee tables</a>
<a href=# onclick="changeHeader(2)">Side tables</a>
<a href=# onclick="changeHeader(3)">Stand tables</a>

等等。我的问题是我想根据按下的链接在 header 元素上使用不同的背景颜色。第一个链接可能是红色背景，第二个是蓝色，第三个是绿色等等。

如何使用 JavaScript 将属性添加到现有的 CSS id？我不使用 jQuery，所以请只使用纯 JavaScript :)

Answer 1

你可以使用style属性

document.getElementById("header").style.backgroundColor = 'red';