如何为网站行情滚动条的涨跌数值设置红绿区分显示？

没问题！要实现上涨数值显示绿色、下跌显示红色的效果，核心就是根据涨跌数据的正负值来给对应元素设置样式。我先帮你补全和修改代码，再拆解思路：

第一步：修正HTML结构（补全缺失元素） #

原HTML里缺少了几个JS要操作的节点（比如AAPLchg、亚马逊相关的价格和涨跌元素），先把这些补上，确保JS能找到对应的DOM元素：

<div id="tickerwrap">
  <marquee>
    <div style="display: inline-block; font-size: 150%">| Apple inc.</div>
    <div style="display: inline-block; font-size: 150%" id="AAPLp"></div>
    <div style="display: inline-block; font-size: 150%" id="AAPLchg"></div>
    <div style="display: inline-block; font-size: 150%" id="AAPLchg%"></div>
    <div style="display: inline-block; font-size: 150%">| Amazon inc.</div>
    <div style="display: inline-block; font-size: 150%" id="AMZNp"></div>
    <div style="display: inline-block; font-size: 150%" id="AMZNchg"></div>
    <div style="display: inline-block; font-size: 150%" id="AMZNchg%"></div>
  </marquee>
</div>
<script>
document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    tickertape();
  }
};
</script>

第二步：修改JS逻辑（添加颜色判断） #

我提供两种实现方式，你可以根据需求选择：

方式1：直接设置内联样式 #

这种方式适合快速实现，不需要额外写CSS：

function tickertape() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var tickertape = JSON.parse(this.responseText);
      
      // 处理Apple数据
      const appleData = tickertape["AAPL"]["quote"];
      document.getElementById("AAPLp").innerHTML = appleData.latestPrice;
      
      // 处理涨跌额
      const appleChange = appleData.change;
      const appleChangeEl = document.getElementById("AAPLchg");
      appleChangeEl.innerHTML = appleChange;
      // 正负判断设置颜色
      if (appleChange > 0) {
        appleChangeEl.style.color = "#2ecc71"; // 绿色
      } else if (appleChange < 0) {
        appleChangeEl.style.color = "#e74c3c"; // 红色
      } else {
        appleChangeEl.style.color = "#333"; // 持平默认黑色
      }
      
      // 处理涨跌幅百分比（转成百分比格式更直观）
      const appleChangePercent = appleData.changePercent;
      const appleChangePercentEl = document.getElementById("AAPLchg%");
      appleChangePercentEl.innerHTML = `${(appleChangePercent * 100).toFixed(2)}%`;
      if (appleChangePercent > 0) {
        appleChangePercentEl.style.color = "#2ecc71";
      } else if (appleChangePercent < 0) {
        appleChangePercentEl.style.color = "#e74c3c";
      } else {
        appleChangePercentEl.style.color = "#333";
      }

      // 处理Amazon数据，逻辑和Apple完全一致
      const amazonData = tickertape["AMZN"]["quote"];
      document.getElementById("AMZNp").innerHTML = amazonData.latestPrice;
      
      const amazonChange = amazonData.change;
      const amazonChangeEl = document.getElementById("AMZNchg");
      amazonChangeEl.innerHTML = amazonChange;
      if (amazonChange > 0) {
        amazonChangeEl.style.color = "#2ecc71";
      } else if (amazonChange < 0) {
        amazonChangeEl.style.color = "#e74c3c";
      } else {
        amazonChangeEl.style.color = "#333";
      }
      
      const amazonChangePercent = amazonData.changePercent;
      const amazonChangePercentEl = document.getElementById("AMZNchg%");
      amazonChangePercentEl.innerHTML = `${(amazonChangePercent * 100).toFixed(2)}%`;
      if (amazonChangePercent > 0) {
        amazonChangePercentEl.style.color = "#2ecc71";
      } else if (amazonChangePercent < 0) {
        amazonChangePercentEl.style.color = "#e74c3c";
      } else {
        amazonChangePercentEl.style.color = "#333";
      }
    }
  };
  xhttp.open("GET", "https://cloud.iexapis.com/v1/stock/market/batch?&types=quote&symbols=aapl,amzn&token=pk_6925213461cb489b8c04a632e18c25dd", true);
  xhttp.send();
};

方式2：用CSS类管理样式（更易维护） #

如果后续需要调整颜色或样式，这种方式更方便：
先添加CSS样式：

.ticker-up {
  color: #2ecc71; /* 上涨绿色 */
}
.ticker-down {
  color: #e74c3c; /* 下跌红色 */
}
.ticker-flat {
  color: #333; /* 持平黑色 */
}

然后修改JS中设置颜色的逻辑为添加/移除类：

// 示例：处理Apple涨跌额的逻辑
const appleChange = appleData.change;
const appleChangeEl = document.getElementById("AAPLchg");
appleChangeEl.innerHTML = appleChange;
// 先移除所有类，避免样式残留
appleChangeEl.classList.remove("ticker-up", "ticker-down", "ticker-flat");
if (appleChange > 0) {
  appleChangeEl.classList.add("ticker-up");
} else if (appleChange < 0) {
  appleChangeEl.classList.add("ticker-down");
} else {
  appleChangeEl.classList.add("ticker-flat");
}

（亚马逊部分的逻辑完全一致，替换元素ID即可）

额外优化建议 #

• 可以给涨跌数值加上正负号，比如上涨显示+2.3，下跌显示-1.5，更清晰
• 如果后续要添加更多股票，建议把处理逻辑封装成函数，避免重复代码，比如：

function setTickerElementValueAndColor(elementId, value) {
  const el = document.getElementById(elementId);
  el.innerHTML = value > 0 ? `+${value}` : value; // 添加正负号
  el.classList.remove("ticker-up", "ticker-down", "ticker-flat");
  if (value > 0) {
    el.classList.add("ticker-up");
  } else if (value < 0) {
    el.classList.add("ticker-down");
  } else {
    el.classList.add("ticker-flat");
  }
}

调用时就简化为：

setTickerElementValueAndColor("AAPLchg", appleData.change);

内容的提问来源于stack exchange，提问作者ethor11