使用 javascript/jQuery 更改类的背景颜色属性
Changing background-color property of a class with javascript/jQuery
这似乎是一个简单的问题,但没有什么可以解决它。我正在尝试使用 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 个或更多猜测"以绿色突出显示。我很肯定我正确设置了可变时间猜测并拼写正确。但是,当猜测时间大于 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>
中的.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
类。
你可以通过以下方式做到这一点步骤 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 ;
}
更改具有 ID 的元素
document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor
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>
在未定义的对象上调用方法将导致错误,后续代码的执行将失败。
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用jquery更改html中的背景颜色
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- JS幻灯片与CSS背景颜色变化
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- Javascript通过列表项的函数和css来更改背景颜色
- Javascript没有从数组中选择背景颜色
- 使用圆中的数组更改背景颜色项目
- 如何用jquery动画改变背景颜色,就像一个过渡
- 使用jquery交换并保存背景颜色
- j查询如何设置/取消设置下拉菜单的背景颜色
- 使用angularjs根据时间更改背景颜色
- 设置Dojo量表的背景颜色
- javascript样式的背景颜色在设置时闪烁.ASP.NET
- 使用javascript更改任意文本的背景颜色
- 在用Javascript更改背景颜色后:hover don'不要改变颜色
- 图像内部的透明背景颜色不受影响
- jQuery mobile-动态更改ui页面背景颜色
- 切换按钮的背景颜色
- JavaScript更改类的背景颜色