JavaScript中的if语句用于执行CSS操作

Question

我最近几天一直在研究 JavaScript，并试图为我创建的比赛报告系统编写一个 if 语句。

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

我想做的是，如果team1的分数大于team2，那么team1的文本颜色将变为黑色而不是普通的灰色。

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

https://jsfiddle.net/ya6d2qbz/5/

- Atomixx

---

这里的“==”是打错了还是实际上在你的代码中？ - Shiping

不，我看到另一个Javascript代码中使用了“==”而不是“=”。我改了代码，但它仍然无法工作。 - Atomixx

您还需要反过来做，这样如果第二个团队获胜，则他们的颜色应为绿色。 - yaakov

@Atomixx 那个 == 明显是错的。它用于比较，而不是赋值。 - Shiping

@TricksfortheWeb 是的，我想我只需要使用 (else) 语句并将 team2 分配给颜色，对吗？如果我错了，请纠正我。 - Atomixx

@Atomixx，你还需要考虑平局的情况。因此，你需要检查它们是否相等。你可以使用if else（... < ...）然后else来处理平局。在每个块中，你需要相应地为两个团队设置颜色。 - Shiping

Answer 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

我还更改了您的 CSS，使两种颜色默认相同：

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

https://jsfiddle.net/bryangators/ya6d2qbz/13/

- bryangators55

Answer 2

您可以使用当前的标记来完成以下操作。

使用下面的函数和一个类，例如本例中的.highlight：

(function() {

  //Cache elements, values and class.
  var highlight = "highlight",
    team1 = document.getElementById('team1_score'),
    //Parse to Int the Inner Text
    team1Score = parseInt(team1.innerText),
    team2 = document.getElementById('team2_score'),
    //Parse to Int the Inner Text
    team2Score = parseInt(team2.innerText);

  //Get highest number
  var highestScore = Math.max(team1Score, team2Score);

  //Highlight the winner.
  if (highestScore === team1Score) {

    team2.classList.remove(highlight);
    team1.classList.add(highlight);

  } else if (highestScore === team2Score) {

    team1.classList.remove(highlight);
    team2.classList.add(highlight);

  }

})();

/* Dont mess with any of this */

.season_date {
  color: #9C9C9C;
  text-align: center;
}

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

.team2_name {
  display: inline-block;
}

.team1_logo {
  padding-right: 30px;
  vertical-align: middle;
}

#team2_logo {
  padding-left: 30px;
  vertical-align: middle;
}

#time {
  font-size: 12px;
  color: #48494a;
  font-weight: 600;
  padding-left: 90px;
  padding-right: 90px;
  text-align: center;
}

.scoreboard {
  text-align: center;
}

#team1_score {
  font-size: 24px;
  font-weight: 600;
}

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

#team2_name {
  padding-left: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #a5a6a7;
}

.highlight {
  color: rgb(101, 189, 119);
}

<!-- Header -->

<p class="season_date">Season 1 Day 1</p>

<div class="scoreboard">

  <a id="team1_name">Tiannamen Squares</a>

  <img class="team1_logo" src="http://images.sphaxball.com/teams/50/tiananmen-squares.png" title="Tiannamen Squares">

  <a id="team1_score">2</a>

  <a id="time">FT</a>

  <a id="team2_score">1</a>

  <img id="team2_logo" src="http://images.sphaxball.com/teams/50/colorado-stoners.png">

  <a id="team2_name">Colorado Stoners</a>
</div>

- Ricky Ruiz

Answer 3

你的代码有两个问题。

首先，你使用了比较等号 (==)，这意味着你正在比较元素是否等于颜色，而不是将元素指定为该颜色。应该是 ....style.color = 'rgb(101, 189, 119)';。

其次，你的目标是 DOM 元素，而不是 DOM 元素的内容。 document.getElementById('team1_score') 应该是 document.getElementById('team1_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 内容解析为整数，以确保您可以拥有一个“大于”另一个的值 :)

parseInt(document.getElementById('team1_score').innerHTML);

我已经创建了一个新的fiddle演示这个正确运行在这里。

希望这可以帮到你！ :)

- Obsidian Age

---

比较的，而不是共享的。 :) 我会编辑，但系统不认为它是“实质性的”。 - yaakov

非常感谢您的帮助！我在另一个 JavaScript 代码中看到了 ( == ) 的使用，没有意识到 = 和 == 意味着完全不同的事情。 - Atomixx

有一个小笔误，我会修复的 ;) 是的，=和==绝对意味着不同的事情！ :) 还有===，它与比较相等是相同的，但也检查了类型。包含文本0的字符串与整数0是不同的（这就是为什么我说你应该将其解析为整数的原因;)）。 - Obsidian Age

@ObsidianAge，由于===是一个精确比较符号，它可以产生一些有趣的结果，例如false不等于0。 - yaakov

Answer 4

你可以尝试这个。

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

- Shiping

Answer 5

我看到的第一个问题是，在 if 块内，您正在进行比较而不是赋值。应该使用 = 而不是 ==。

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

document.getElementById('team1_score').textContent

由于您正在比较两个字符串形式的数字，因此还应将字符串解析为数字。如果第二支队伍获胜，则比较也会失效。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)';
}

这里是一个完美运作的fiddle: https://jsfiddle.net/7p1v1wt7/

- Bruno Santos

---

谢谢！当您突出团队名称并在平局时添加比较时，您已经比我多想了一步。 - Atomixx

很高兴能帮助@Atomixx。 - Bruno Santos