使用 javascript/jQuery 更改类的背景颜色属性答案

【问题标题】：Changing background-color property of a class with javascript/jQuery使用 javascript/jQuery 更改类的背景颜色属性
【发布时间】：2012-07-05 10:46:08
【问题描述】：

这似乎是一个简单的问题，但没有什么可以解决它。我正在尝试使用 javascript/jQuery 动态更改某些文本的背景颜色（从白色或粉红色到绿色），但由于某种原因它不起作用。文本使用名为“.novice”的 CSS 类设置样式。

这是 CSS。这很简单。我也尝试过完全删除背景颜色，所以它还没有设置背景颜色。

<style type="text/css">
.novice {
background-color: pink;
}

</style>

这是一个数组，其中包含我使用循环写出的项目。第一项具有“新手”类

var achievements = ['<span class="novice">novice - 10 or more guesses </span>', ...]

下面是一个 if 语句，如果为真，应该使“.novice”类具有“背景色：绿色”属性，并使“新手 - 10 次或更多猜测”以绿色突出显示。我很肯定我已经正确设置了变量 timeguessed 并且拼写正确。但是，当 timesguessed 大于 10 时，“新手...”仍然不会以绿色突出显示。

if (timesguessed > 10) {
    $('.novice').css('background-color', 'green'); 
}

我在上面输入的内容对吗？ 我也试过替换 $('.novice').css('background-color', 'green');和 $('.novice').background-color(green); ，尽管这可能是错误的。

即使我用所谓的新修改的“新手”类打印出另一行，文本仍然不会以绿色突出显示。

document.write('<span class="novice">novice - 10 or more guesses </span>');

我知道原始的 CSS .novice 类正在工作，因为无论时间猜测是大于还是小于 10，文本都会以粉红色突出显示。

我不确定 Javascript 是不是在修改 CSS 类，还是什么。或者它只是做了一些其他的事情来覆盖它？

感谢您的帮助。是的，我是 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>

【问题讨论】：

您很好地解释了您的问题，非常感谢；但是，我想知道是什么事件调用了if(timeguessed >10) 语句。这是点击功能，更改功能，加载功能吗？ For sanity's sake, I've outlined the core principals of your issue and made a working jsFiddle for you.
我想说该代码没有任何问题，我唯一能想到的是if (timeguessed > 10) 从未真正评估为真。你绝对肯定它确实如此吗？（只需在其中粘贴alert() 以确保）。我还建议不要在 jQuery 中更改背景颜色，而是添加或更改元素的类并将所有样式保存在 CSS 文件中。
我在函数中没有它。我是不是该？感谢 jsFiddle，它很棒。是的，我确信 timesguessed 大于 10，因为我在那个特定的 if 语句之前已经为我打印了 timesguessed。如果有帮助，我已经在上面添加了我的整个代码............
这看起来像是页面中唯一使用 jQuery 的地方......你确定它包含正确吗？检查您的控制台将告诉您链接是否失败（并且还应该说明 $ 是否未定义）。要使用谷歌的最新版本，请使用此链接：ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
对未定义对象调用方法会报错，后续代码执行会失败

标签： javascript jquery css class background-color

【解决方案1】：

.css() 在您的代码中通过向它们添加内联样式来更改页面上已有元素的样式 - 不是通过修改 css 规则。

您可以像这样在运行时添加新规则：

$('head').append('<style type="text/css">.novice{color:green;}</style>');

虽然我不支持这种修改。我宁愿看到像这样的css

.novice {background-color: pink;}
.over-ten-guesses .novice {background-color:green;}

之后，您可以在任何以 .novice 作为其后代的容器元素上使用 Javascript 切换 .over-ten-guesses 类。

【讨论】：

【解决方案2】：

您可以通过以下方式做到这一点 第一步

   var imageUrl= "URL OF THE IMAGE HERE";
   var BackgroundColor="RED"; // what ever color you want

对于具有相同类的元素

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 ;
            }

使用 ID 更改元素

document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor

【讨论】：

【解决方案3】：

jQuery 未正确包含在页面中。检查您的控制台会告诉您链接是否失败（并且还应该说 $ 未定义）。要使用谷歌的最新版本，请使用此链接：http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

即改变这个：

<script type="text/javascript" src="../MM_JAVASCRIPT2E/MM_JAVASCRIPT2E/_js/jquery-1.6.3.min.js"></script>

到这里

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

在未定义的对象上调用方法会导致错误，后续代码执行会失败。

【讨论】：