javascript中的If语句来执行CSS操作

在过去的几天里，我一直在玩弄java脚本，并且一直在尝试为我正在创建的比赛报告系统编写一个if语句

        if (document.getElementById('team1_score') > document.getElementById('team2_score') ){
document.getElementById('team1_score').style.color == 'rgb(101, 189, 119)';

}

我想说的是，如果team1的分数大于team2，那么team1文本的颜色将变为黑色，而不是正常的灰色

---

但是我没有成功。有人能帮我吗？

您的代码有两个问题

首先，您使用比较等号（

==

），这意味着您正在比较元素是否等于颜色，而不是指定要使用该颜色的元素。它应该是

…style.color='rgb（101189119）'

其次，您的目标是DOM元素，而不是DOM元素的内容
document.getElementById（'team1\u score'）
应该是
document.getElementById（'team1\u score'）。innerHTML

完整的JavaScript应该是：

if (document.getElementById('team1_score').innerHTML > document.getElementById('team2_score').innerHTML) {
  document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)';
}

请注意，还应将
innerHTML
内容解析为整数，以确保一个值比另一个值大：）

我已经创造了一个新的小提琴，展示了它的正确工作

希望这有帮助！：）
 你可以试试这个

if (document.getElementById('team1_score').innerText > document.getElementById('team2_score').innerText ){

    document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team2_score').style.color = 'rgb(0, 0, 0)';
}
else if (document.getElementById('team1_score').innerText < document.getElementById('team2_score').innerText ){
    document.getElementById('team2_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team1_score').style.color = 'rgb(0, 0, 0)';
}
else { // some other color for tie
    document.getElementById('team1_score').style.color = 'rgb(0, 0, 0)'; 
    document.getElementById('team2_score').style.color = 'rgb(0, 0, 0)';
}

if（document.getElementById（'team1_分数'）.innerText>document.getElementById（'team2_分数'）.innerText）{
document.getElementById（'team1_score'）.style.color='rgb（101189119'）；
document.getElementById（'team2_score'）.style.color='rgb（0,0,0'）；
}
else if（document.getElementById（'team1_分数'）.innerText
我看到的第一个问题是，在if块中，您正在进行比较，而不是属性。而不是==您应该只使用=

第二个问题是，您应该访问html元素的textContent，如：

document.getElementById('team1_score').textContent

因为您是在比较字符串形式的两个数字，所以还应该将字符串解析为一个数字。在团队2获胜的情况下，它也缺少比较，Javascript如下所示：

if (Number(document.getElementById('team1_score').textContent) > Number(document.getElementById('team2_score').textContent) ){
    document.getElementById('team1_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team1_name').style.color = 'rgb(101, 189, 119)';
}else if (Number(document.getElementById('team2_score').textContent) > Number(document.getElementById('team1_score').textContent)){
    document.getElementById('team2_score').style.color = 'rgb(101, 189, 119)';
    document.getElementById('team2_name').style.color = 'rgb(101, 189, 119)';
}

这是一个摆弄一切的好方法：
您可以使用当前标记执行以下操作

使用下面的函数和名为
的类。在本例中突出显示
：


（函数（）{
//缓存元素、值和类。
var highlight=“highlight”，
team1=document.getElementById（'team1_分数'），
//解析以对内部文本进行整型
team1Score=parseInt（team1.innerText），
team2=document.getElementById（'team2_分数'），
//解析以对内部文本进行整型
team2Score=parseInt（team2.innerText）；
//获得最高数字
var highestScore=Math.max（team1Score、team2Score）；
//突出显示获胜者。
if（最高分===team1Score）{
team2.classList.remove（突出显示）；
team1.classList.add（突出显示）；
}否则如果（最高分===team2Score）{
team1.classList.remove（突出显示）；
team2.classList.add（突出显示）；
}
})();
/*不要弄乱这些*/
.季节日期{
颜色：#9C9C9C；
文本对齐：居中；
}
#团队1_名称{
显示：内联块；
右侧填充：12px；
字体大小：20px；
字号：700；
颜色：#1d1e1f；
}
.team2_名称{
显示：内联块；
}
.team1_标志{
右侧填充：30px；
垂直对齐：中间对齐；
}
#团队2_标志{
左侧填充：30px；
垂直对齐：中间对齐；
}
#时间{
字体大小：12px；
颜色：#48494a；
字号：600；
左侧填充：90px；
右侧填充：90px；
文本对齐：居中；
}
.记分牌{
文本对齐：居中；
}
#团队1_分数{
字体大小：24px；
字号：600；
}
#第二组得分{
字体大小：24px；
字号：600；
颜色：#a5a6a7；
}
#团队2_名称{
左侧填充：12px；
字体大小：20px；
字号：700；
颜色：#a5a6a7；
}
.亮点{
颜色：rgb（101、189、119）；
}

第1季第1天

天安门广场
2.
英尺
1.
科罗拉多石匠
您必须先从元素中获取文本，然后才能进行比较。您还需要使用parseInt函数

下面是一个简单的javascript解决方案：

var team1 = document.getElementById('team1_name');
var team2 = document.getElementById('team2_name');
var score1 = document.getElementById('team1_score');
var score2 = document.getElementById('team2_score');
var winningColor = 'rgb(101, 189, 119)';    

if(parseInt(score1.innerHTML) > parseInt(score2.innerHTML)){
    score1.style.color = winningColor;
    team1.style.color = winningColor;
}else if(parseInt(score1.innerHTML) < parseInt(score2.innerHTML)){
    score2.style.color = winningColor;
    team2.style.color = winningColor;
}//does nothing if equal

您的代码中是否存在==打字错误？不，我看到在另一个Javascript代码中使用了==而不是=。我更改了代码，但仍然不起作用。您也可以反向执行，这样，如果第二队获胜，那么他们的颜色将为绿色。@Atomix that==肯定是错误的。这是为了比较，而不是赋值。@TricksfortheWeb是的，我想我会使用（else）语句并将颜色赋值给team2？如果我错了，请纠正我比较，而不是比较。：）我会编辑，但系统并不认为它是“实质性的”。非常感谢你的帮助！我在另一个JavaScript代码中看到了（=）的用法，但没有意识到，=和==意味着两件完全不同的事情；我会解决的；）是的，
=
和
==
的含义肯定不同！：）还有
==
，它与
比较
相等相同，但也检查
类型
。包含文本
0
的字符串不同于整数
0
（这就是为什么我说您“应该”将其也解析为整数；）@obsidyanage，因为
==
这是一个精确的比较，它可以做出一些有趣的事情，比如
false
不等于
0
。谢谢！当突出显示团队名称并添加一个比较时，您比我想的早了一步，以防出现DrawHappy to help@Atomixx
var team1 = document.getElementById('team1_name');
var team2 = document.getElementById('team2_name');
var score1 = document.getElementById('team1_score');
var score2 = document.getElementById('team2_score');
var winningColor = 'rgb(101, 189, 119)';    

if(parseInt(score1.innerHTML) > parseInt(score2.innerHTML)){
    score1.style.color = winningColor;
    team1.style.color = winningColor;
}else if(parseInt(score1.innerHTML) < parseInt(score2.innerHTML)){
    score2.style.color = winningColor;
    team2.style.color = winningColor;
}//does nothing if equal

#team1_score, 
#team2_score
{
font-size: 24px;
font-weight: 600;
color: #a5a6a7;
}

#team1_name
{
display: inline-block; 
padding-right: 12px;
font-size: 20px;
font-weight: 700;
color: #a5a6a7;
}