使用 JavaScript 向 CSS id 添加属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13122329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a property to a CSS id using JavaScript
提问by Simon Carlson
I got a simple JavaScript that changes the inner HTML of an element when links are clicked, it looks like this:
我得到了一个简单的 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];
}
The CSS for headeris below:
CSSheader如下：
#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;
}
And the HTML is basically this:
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>
And so on. My problem is that I'd like to have different background colors on the headerelement depending on what link is pressed. The first link might get a red background, the second a blue, the third a green and so on..
等等。我的问题是我想header根据按下的链接在元素上使用不同的背景颜色。第一个链接可能是红色背景，第二个是蓝色，第三个是绿色，依此类推。
How can I use JavaScript to add a property to an already existing CSS id? I don't use jQuery, so only pure JavaScript please :)
如何使用 JavaScript 将属性添加到现有的 CSS id？我不使用 jQuery，所以请只使用纯 JavaScript :)
回答by Claudio Redi
You could use styleproperty
你可以使用style财产
document.getElementById("header").style.backgroundColor = 'red';
回答by dfsq
You can change your approach a little:
你可以稍微改变你的方法：
function changeHeader(Index) {
var headers = [
{color: 'red', text: "Coffee tables"},
{color: 'blue', text: "Side tables",
{color: '#DDD', text: "Stand tables"},
{color: "#ACD12A", text: "Dinner tables"},
{color: "Chuck Norris", text: "Stools"}
];
var header = document.getElementById("header"),
header.innerHTML = headers[Index].text;
header.style.backgroundColor = headers[Index].color;
}?
回答by user1305989
See sample code in this page : http://jsfiddle.net/Rd4y5/
请参阅此页面中的示例代码：http: //jsfiddle.net/Rd4y5/
js :
js：
d = document.getElementById("d1");
console.log(d.style);
d.style.backgroundColor="red";
d.style.width = "300px";
d.style.height="300px";
console.log(d.style);
html :
html :
<div id='d1'>a<div>?
回答by Christofer Eliasson
You don't need to add an additional property to the ID, either you add inline-styling to the element, or if you don't want to use inline-styling you add an additional class to the element instead, that sets the proper background color.
您不需要向 ID 添加额外的属性，或者向元素添加内联样式，或者如果您不想使用内联样式，则向元素添加一个额外的类，这会设置正确的背景颜色。
Here is an example of how you can add/remove classes from an element, without using jQuery: http://snipplr.com/view/3561/addclass-removeclass-hasclass/
以下是如何在不使用 jQuery 的情况下从元素添加/删除类的示例：http: //snipplr.com/view/3561/addclass-removeclass-hasclass/
