使用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];

}

CSS for header是:

#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';