使用 javascript 中的 if 语句更改 CSS 样式

Question

上下文：我正在尝试根据 if 语句更改文本的颜色（如果returnOfInvestment >= 0红色，则为绿色，如果这不是真的）但是，它似乎不起作用。 我已经搜索过 SO，但无法弄清楚为什么它没有按预期工作。

 var returnOfInvestment = (netProfit / initialInvestment.value) * 100; var valEl = document.querySelector(".number dashtext-2"); var portfolioEl = document.querySelector(".number dashtext-3"); if (returnOfInvestment >= 0) { valEl.style.color = "green"; portfolioEl.style.color = "green"; } else { valEl.style.color = "red"; portfolioEl.style.color = "red"; }

 .dashtext-2 { color: #27b83f !important; } .dashtext-3 { color: #27b83f !important; }

 <div class="col-md"> <div class="statistic-block block"> <div class="progress-details d-flex align-items-end justify-content-between"> <div class="title"> <div class="icon"><i class="icon-bars"> </i></div><strong> <div class="valdeval"></div> </strong> </div> <div class="number dashtext-2"> <div class="valorization"></div> </div> </div> </div> </div> <div class="col-md"> <div class="statistic-block block"> <div class="progress-details d-flex align-items-end justify-content-between"> <div class="title"> <div class="icon"><i class="icon-pie-chart"></i></div><strong> Portfolio</strong> </div> <div class="number dashtext-3"> <div class="totalportfolio"></div> </div> </div> </div> </div>

Answer 1

1. 给你想要设置类样式的元素并使用 CSS 应用绿色文本颜色。
2. 在 CSS 中为红色文本颜色创建一个类，例如： .color-red { color: red; } .color-red { color: red; }
3. 稍微更改脚本，如下所示。 使用classList.remove('.color-red'); 删除将文本颜色更改为红色的类或使用.add而不是.remove的相同功能以应用红色 tex-color 的类。

 function changeStyle() { var returnOfInvestment = document.getElementById('input-number').value; var valEl = document.querySelector('.random-element'), portfolioEl = document.querySelector('.portfolio-element'); if (returnOfInvestment >= 0) { valEl.classList.remove('color-red'); portfolioEl.classList.remove('color-red'); } else { valEl.classList.add('color-red'); portfolioEl.classList.add('color-red'); } }

 .random-element, .portfolio-element { color: green; } .color-red { color: red; }

 <input type="number" id="input-number" name="input-number" onchange="changeStyle()"> <h1 class="random-element">Random element</h1> <h1 class="portfolio-element">Portfolio element</h1>

或者，您可以向要更改颜色的所有元素添加特定类。 然后你可以改用这个：

var allEL = document.querySelectorAll('.class-name');

if (returnOfInvestment >= 0) {
    allEL.forEach(el => el.classList.remove('color-red'));
  } else {
    allEL.forEach(el => el.classList.add('color-red'));
  }
}

这将应用/删除具有特定类的所有元素的类。 如果您需要对多个元素应用更改，真的很有帮助。