使用 javascript/jQuery 更改类的背景颜色属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11337404/
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 property of a class with javascript/jQuery
提问by LazerSharks
This seems like a simple problem but nothing nothing is fixing it. I'm trying to dynamically change the background-color (from white or pink to green) on some text with javascript/jQuery but for some reason it's not working. The text is styled with a CSS class called ".novice".
这似乎是一个简单的问题，但没有什么可以解决它。我正在尝试使用 javascript/jQuery 动态更改某些文本上的背景颜色（从白色或粉红色到绿色），但由于某种原因它不起作用。文本使用名为“.novice”的 CSS 类进行样式设置。
Here's the CSS. It's simple. I've also tried removing background-color completely so it does not already have a set background-color.
这是CSS。这很简单。我也试过完全删除背景色，所以它没有设置背景色。
<style type="text/css">
.novice {
background-color: pink;
}
</style>
Here is an array with items I wrote out using a loop. The first item has the class "novice"
这是一个包含我使用循环写出的项目的数组。第一项有“新手”类
var achievements = ['<span class="novice">novice - 10 or more guesses </span>', ...]
Below is an if statement, which if true, is supposed to make the ".novice" class have a "background-color: green" property and make "novice - 10 or more guesses" be highlighted in green. I'm positive that I have the variable timesguessed set up correctly and spelled right. However when timesguessed is greater than 10, "novice..." will still not be highlighted in green.
下面是一个 if 语句，如果为真，应该使“.novice”类具有“背景颜色：绿色”属性，并使“新手 - 10 个或更多猜测”以绿色突出显示。我确信我已经正确设置了变量 timeguessed 并且拼写正确。但是，当时间猜测大于 10 时，“新手...”仍不会以绿色突出显示。
if (timesguessed > 10) {
$('.novice').css('background-color', 'green');
}
Am I typing this above portion right?I've also tried replacing $('.novice').css('background-color', 'green'); with $('.novice').background-color(green); , though that's probably wrong.
我在上面的部分打字对吗？我也试过替换 $('.novice').css('background-color', 'green'); 用 $('.novice').background-color(green); ，虽然这可能是错误的。
Even if I print out another line with the supposedly newly modified "novice" class the text will still not be highlighted in green.
即使我用所谓的新修改的“新手”类打印出另一行，文本仍然不会以绿色突出显示。
document.write('<span class="novice">novice - 10 or more guesses </span>');
I know that the original CSS .novice class is working because the text will be highlighted in pink if no matter if timesguessed is greater or less than 10.
我知道原始 CSS .novice 类正在工作，因为无论时间猜测是大于还是小于 10，文本都会以粉红色突出显示。
I'm not sure if the Javascript is not modifying the CSS class, or what. Or maybe it does just something else is overriding it?
我不确定 Javascript 是否没有修改 CSS 类，或者什么。或者也许它只是有其他东西覆盖了它？
Thanks for the help. Yeah I'm a beginner at javascript/jQuery.
谢谢您的帮助。是的，我是 javascript/jQuery 的初学者。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.novice {
}
</style>
<script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"></script>
<title>Number Guessing Game</title>
</head>
<body>
<h1 style="text-align:center;"> Number Game </br> Try to guess my number that is between 0-1000 </h1>
<script>
// BEGIN LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS. You can ignore this part I think, this part works.
var realnumber = prompt('Player 1, please enter a number for Player 2 to guess then hand it off to Player 2.', '');
while (isNaN(realnumber)) {
realnumber = prompt('Player 1, please enter a NUMBER, dimwit, for Player 2 to guess.', '');}
var timesguessed=0;
while (numbertoguess != 0) {
var numbertoguess = prompt("Player 2, guess a number", "");
while (isNaN(numbertoguess)) {
numbertoguess = prompt('Please, type in a number');} // why don't I need an "else" here?
numbertoguess = Math.abs(numbertoguess - realnumber);
if ( numbertoguess >= 50 ) {
alert("Tundra cold");
timesguessed++;
}
else if ( 30 <= numbertoguess && numbertoguess < 50) {
alert("cold");
timesguessed++;
}
else if ( 20 <= numbertoguess && numbertoguess < 30 ) {
alert("warm");
timesguessed++;
}
else if ( 10 <= numbertoguess && numbertoguess< 20 ) {
alert("hot");
timesguessed++;
}
else if ( 5 <= numbertoguess && numbertoguess < 10 ) {
alert("Steaming hot!");
timesguessed++;
}
else if ( 3 <= numbertoguess && numbertoguess < 5 ) {
alert("SCALDING HOT!");
timesguessed++;
}
else if ( 1 < numbertoguess && numbertoguess < 3 ) {
alert("FIRE!");
timesguessed++;
}
else if ( numbertoguess == 1 ) {
alert("Face Melting!");
timesguessed++;
} else if ( numbertoguess == 0 ) {
alert("BINGO!");
timesguessed++;
}
}
document.write('</br></br></br></br><h2 style="text-align:center; font-size: 18px;"> The number was ' + realnumber + '.');
if (timesguessed == 1) {
document.write('</span><h2 style="text-align:center;">It took you ' + timesguessed + ' guess.</h2>');
} else {
document.write('<h2 style="text-align:center;">It took you ' + timesguessed + ' guesses.</h2>');
}
// END LONG BLOCK OF CODE WITH GUESSING GAME MECHANISMS
document.write('</br></br>')
//below is the array written out with a loop
var achievements = ['<span class="novice">novice - 10 or more guesses </span>',bronze - 7-10 guesses', 'silver', 'gold', 'titanium', 'platinum', 'diamond', ]
var counter = 0;
while (counter < achievements.length) {
document.write('<h2 style="text-align:center;">' + achievements[counter] + ' ');
counter++;
}
//below is the "if" function of question
if (timesguessed > 10) {
$('.novice').css('background-color', '#00FF00'); //why does this not work?
}
document.write('<span class="novice">novice - 10 or more guesses </span>'); //why does this not work?
</script>
</body>
</html>
采纳答案by nbrooks
jQuery is not being included in the page correctly. Checking your console will tell you if the link failed (and should also say that $is undefined). To use the latest version from google use this link: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
jQuery 未正确包含在页面中。检查您的控制台会告诉您链接是否失败（并且还应该说$未定义）。要使用 google 的最新版本，请使用此链接：http: //ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
i.e. Change this:
即改变这个：
<script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"></script>
to this
对此
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
Calling a method on an undefined object would cause an error, and execution of subsequent code will fail.
在未定义的对象上调用方法会导致错误，并且后续代码的执行将失败。
回答by o.v.
.css()in your code changes the style of elements that are already on the pageby adding inline styles to them - notby modifying the css rule.
.css()在您的代码中，通过向它们添加内联样式来更改页面上已有元素的样式 -而不是通过修改 css 规则。
You can add a new rule at runtime like so:
您可以在运行时添加新规则，如下所示：
$('head').append('<style type="text/css">.novice{color:green;}</style>');
I am not a proponent of such modifications though. I'd much rather see css like
不过，我不支持这种修改。我更愿意看到像这样的 css
.novice {background-color: pink;}
.over-ten-guesses .novice {background-color:green;}
After that you can toggle the .over-ten-guessesclass with Javascript on any container element that has .noviceas its descendant.
之后，您可以.over-ten-guesses在.novice作为其后代的任何容器元素上使用 Javascript切换类。
回答by Vignesh Subramanian
You can do it in following ways STEP 1
您可以通过以下方式进行 STEP 1
var imageUrl= "URL OF THE IMAGE HERE";
var BackgroundColor="RED"; // what ever color you want
for elements with same class
对于具有相同类的元素
var elements = document.getElementsByClassName("ClassName")
for (var i = 0; i < elements.length; i++) {
elements[i].style.background=imageUrl;
//if you want to change bg image
//if you want to change bg color
elements[i].style.backgroundColor=BackgroundColor ;
}
To change an element with ID
更改带有 ID 的元素
document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor
