使用 Javascript 更改 CSS 中元素的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10299020/
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
Changing background-color of an element in CSS using Javascript
提问by user1353742
Basically I want to change the background color of an element in CSS using JavaScript at the click of a button.
基本上我想通过单击按钮使用 JavaScript 更改 CSS 中元素的背景颜色。
So far my CSS looks something like this:
到目前为止，我的 CSS 看起来像这样：
div.box {
width:100px;
height:100px;
background-color:#FF2400;
}
It needs to change dynamically to a choice of several colors, just with multiple buttons will do (Each being a different color).
它需要动态更改为多种颜色的选择，只需使用多个按钮即可（每个按钮都是不同的颜色）。
回答by iambriansreed
Done: http://jsfiddle.net/iambriansreed/zmtU4/
完成：http: //jsfiddle.net/iambriansreed/zmtU4/
Updated to be Non-jQuery.
更新为非 jQuery。
HTML
HTML
<div id="box"></div><div id="box"></div>
<button type="button" onclick="button_click('red');">Red</button>
<button type="button" onclick="button_click('blue');">Blue</button>
<button type="button" onclick="button_click('green');">Green</button>
<button type="button" onclick="button_click('yellow');">Yellow</button>
<button type="button" onclick="button_click('purple');">Purple</button>?
Pure JavaScript
纯 JavaScript
function button_click(color){
document.getElementById("box").style.backgroundColor=color;
}?
回答by Jamiec
The vanilla-javascript way to do this is to get a reference to the element and use style.backgroundColorto change the color:
执行此操作的 vanilla-javascript 方法是获取对元素的引用并用于style.backgroundColor更改颜色：
for example, if the div has an id of myBoxyou would use
例如，如果 div 有一个myBox你会使用的 id
document.getElementById("myBox").style.backgroundColor="#000000"; // change to black
Live example: http://jsfiddle.net/QWgcp/
现场示例：http: //jsfiddle.net/QWgcp/
Incidentally, if you're doing a lot of this kind of manipulation frameworks such as jQuery provide you with some help in writing the code. The same functionality using jQuery would be a bit simpler:
顺便说一句，如果您正在做很多此类操作框架，例如 jQuery，那么您在编写代码时会提供一些帮助。使用 jQuery 的相同功能会更简单一些：
$('#myBox').css('background-color','#000000');
回答by Oleg V. Volkov
Do I correctly understand that you don't want to change single element, but CSS rule instead, so all matching elements would be affected? Here's an example how to dynamically change style in your example to blue color:
我是否正确理解您不想更改单个元素，而是要更改 CSS 规则，因此所有匹配的元素都会受到影响？以下是如何将示例中的样式动态更改为蓝色的示例：
<html>
<head>
<style>
div.box{
width:100px;
height:100px;
background-color:#FF2400;
}
</style>
<script>
var sheet = document.styleSheets[0] // Of course if you have more than one sheet you'll have to find it among others somehow
var rulesList = sheet.cssRules || sheet.rules // some older browsers have it that way
var rule = rulesList[0] // same for rules - more than one and you'll have to iterate to find what you need
rule.style.backgroundColor = 'blue' // and voila - both boxes are now blue
</script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Just assign this piece as 'click' event handler to button and you're set.
只需将此部分指定为按钮的“单击”事件处理程序即可。
