如果在JavaScript中语句执行CSS操作

Question

过去几天我一直在用java脚本弄乱，并且一直在尝试为我创建的匹配报告系统编写IF语句。

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

}

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

我试图要做的是，如果Team1的得分大于Team2，则Team1文本的颜色将变成黑色，而不是正常的灰色。

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

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/

Answer 2

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

第二个问题是您应该访问html元素的文本符号：

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

这是所有东西都像魅力一样工作的小提琴：https：//jsfiddle.net/7p1v1wt7/

Answer 3

您可以使用当前的标记进行以下操作。

在此示例中使用下面的功能和一个名为.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>

Answer 4

您的代码有两个问题。

首先，您使用比较等于符号（==），这意味着您是比较 是否等于颜色，而不是分配使用该颜色。它应该是....style.color = 'rgb(101, 189, 119)';。

第二，您是针对DOM元素的，而不是DOM元素的 content 。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);

我已经创建了一个新的小提琴，在此处表现出正确的工作。

希望这会有所帮助！：）

Answer 5

您可以尝试。

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