使用javascript/jQuery更改类的背景色属性_Javascript_Jquery_Css_Class_Background Color

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

javascript jquery css class

使用javascript/jQuery更改类的背景色属性,javascript,jquery,css,class,background-color,Javascript,Jquery,Css,Class,Background Color,这似乎是一个简单的问题，但什么也解决不了。我试图用javascript/jQuery动态地改变一些文本的背景颜色（从白色或粉色到绿色），但由于某些原因，它不起作用。该文本使用名为“.nearrow”的CSS类进行样式设置这是CSS。很简单。我还尝试完全删除背景色，这样它就没有设置的背景色了 <style type="text/css"> .novice { background-color: pink; } </style> 我键入上述部分正确吗？我还尝试过替换$

这似乎是一个简单的问题，但什么也解决不了。我试图用javascript/jQuery动态地改变一些文本的背景颜色（从白色或粉色到绿色），但由于某些原因，它不起作用。该文本使用名为“.nearrow”的CSS类进行样式设置

这是CSS。很简单。我还尝试完全删除背景色，这样它就没有设置的背景色了

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

</style>

我键入上述部分正确吗？ 我还尝试过替换$（'.nearear'）.css（'background-color'，'green'）；具有 $（'.novel'）。背景色（绿色），虽然这可能是错误的

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

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

document.write（'新手-10次或更多猜测'）；

我知道原来的CSS.新手类正在工作，因为无论TimeGuessed是大于还是小于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>


.新手{
}
猜数字游戏
数字游戏
试着猜我的数字在0-1000之间
//以猜游戏机制开始长代码块。你可以忽略这一部分，我认为，这一部分是有效的。
var realnumber=prompt（'Player 1，请输入一个数字让Player 2猜，然后交给Player 2'，''）；
while（isNaN（realnumber））{
realnumber=prompt（'player1，请输入一个数字，dimwit，让player2猜。，''；}
var timesguessed=0；
while（numbertoguess！=0）{
var numbertoguess=prompt（“玩家2，猜一个数字，”）；
while（isNaN（numbertoguess））{
numbertoguess=prompt（'Please，键入一个数字'）；}//为什么我不需要一个“else”呢？
numbertoguess=Math.abs（numbertoguess-realnumber）；
如果（numbertoguess>=50）{
警报（“冻原冷”）；
时间猜测++；
}
else if（30jQuery未正确包含在页面中。检查控制台将告诉您链接是否失败（还应说明$
未定义）。要使用google的最新版本，请使用此链接：
i、 e.改变这一点：
<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>



在未定义的对象上调用方法将导致错误，后续代码的执行将失败。
.css（）
在代码中通过修改css规则将内联样式添加到元素中，从而更改页面上已有元素的样式-而不是
您可以在运行时添加新规则，如下所示：
$('head').append('<style type="text/css">.novice{color:green;}</style>'); 

之后，您可以在任何容器元素上使用Javascript切换。超过十次猜测类，该容器元素的后代为。新手。您可以通过以下方式进行操作
步骤1
   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 ;
            }

您很好地解释了您的问题，我们对此表示感谢；但是，我想知道是什么事件调用了if（timegusted>10）
语句。这是一个单击函数、更改函数、加载函数吗？我想说，该代码没有错，我唯一能想到的是if（timegusted>10）
的计算结果从来都不是真的。你绝对肯定它是真的吗？（只需在其中粘贴一个警报（）
即可确保）。我还建议不要在jQuery中更改背景颜色，而是添加或更改元素的类，并将所有样式保留在CSS文件中。我没有在函数中使用它。我应该吗？感谢JSFIDLE，它很棒。是的，我确定timesguessed大于10，因为在指定之前我已经为我打印了timesguessedic if语句。如果有帮助的话，我已经在上面添加了我的全部代码……。这看起来是页面中您使用jQuery的唯一地方……您确定它包含正确吗？检查控制台会告诉您链接是否失败（还应该说，$是否未定义）。要使用google的最新版本，请使用此链接：在未定义的对象上调用方法将导致错误，后续代码的执行将失败
.novice {background-color: pink;}
.over-ten-guesses .novice {background-color:green;}

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

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