如果在javascript中声明执行CSS动作

时间:2017-02-23 02:25:35

标签: javascript css

过去几天我一直在乱用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文本的颜色将变为黑色而不是正常的灰色。

然而,我没有成功。任何人都可以帮助我吗?

5 个答案:

答案 0 :(得分:2)

在比较它们之前,您必须先从元素中获取文本。您还需要使用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/

答案 1 :(得分:1)

您的代码存在两个问题。

首先,你使用比较等号(==),这意味着你比较元素是否等于颜色,而不是赋值使用该颜色的元素。它应该是....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);

我创建了一个新的小提琴,展示了这个正常工作here

希望这有帮助! :)

答案 2 :(得分:1)

你可以试试这个。

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

答案 3 :(得分:1)

我看到的第一个问题是,在 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)';
}

这里的一切都像魅力一样:https://jsfiddle.net/7p1v1wt7/

答案 4 :(得分:1)

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

使用下面的函数和本例中名为.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>