在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应用绿色text-color
2. 在CSS中创建一个红色文本的类:.color-red { color: red; }
3. 将脚本稍微修改如下。使用classList.remove('.color-red');删除将文本颜色更改为红色的类，或者使用.add代替.remove的相同功能为红色文本颜色应用类。

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

将应用/删除具有特定类的所有元素的类。