JavaScript通过if语句修改CSS文本颜色不生效问题求助

你遇到的样式不生效问题由两个错误共同导致：

• 选择器语法错误
  你写的.number dashtext-2是后代选择器语法，含义为「查找class为number的元素内部的<dashtext-2>标签」，完全匹配不到你页面上同时携带number和dashtext-2两个类的元素。正确的多类选择器写法是将多个类名用.直接连接，中间不加空格。
• CSS !important 优先级覆盖
  你在CSS中给目标元素设置了带!important的颜色规则，普通的JS内联样式设置优先级低于带!important的外部CSS规则，就算选择器正确也无法覆盖原有颜色。

完整修改示例 #

修正后的JS代码 #

var returnOfInvestment = (netProfit / initialInvestment.value) * 100;
// 修正选择器语法
var valEl = document.querySelector(".number.dashtext-2");
var portfolioEl = document.querySelector(".number.dashtext-3");

if (returnOfInvestment >= 0) {
  // 加important覆盖原有CSS的important规则
  valEl.style.setProperty("color", "green", "important");
  portfolioEl.style.setProperty("color", "green", "important");
} else {
  valEl.style.setProperty("color", "red", "important");
  portfolioEl.style.setProperty("color", "red", "important");
}

更推荐的可选方案 #

如果业务允许调整原有CSS，直接移除CSS中.dashtext-2、.dashtext-3规则里的!important标识即可，不需要修改JS的样式设置写法就能生效：

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

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

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