如何根据条件更改字体权重，然后根据不同的条件更改颜色而不覆盖？ （JS）

Question

      if (Math.abs(decimalChange) > .025){ //bold significant changes
        tdChange.style = 'font-weight:bold;';
      }

      if (decimalChange >= 0){
        tdChange.style = 'color:green;';
      }
      else {
        tdChange.style = 'color:red;';
      }

上面有两个条件根据数字decimalChange的内容确定TD元素tdChange的两个独立属性。我发现上次放置的两个条件中的任何一个都可以按照需要工作，而先放在第一个条件中的条件会被忽略。我可以很容易地假设我用另一个覆盖了一个，但是当我尝试用第二个属性的等式的右边替换为

时

tdChange.style + 'theSecondPropertyIAmAdjusting';  

我发现这两个属性都没有实现。如何根据一个条件确定元素的字体粗细，然后根据不同的条件确定同一元素的字体颜色，而不覆盖实现的第一个属性的结果？

Answer 1

有几种选择。一种可能是使用object.style.property语法。这样您就可以定义多个属性。

你宣布它的方式，属性总是会被覆盖。

var tdChange = document.getElementById('tdChange');

var numbers = [.03, .18, -.018];
var randNumber = numbers[Math.floor(Math.random() * numbers.length)];
if (Math.abs(randNumber) > .025){ //bold significant changes
    tdChange.style.fontWeight = 'bold';
}

tdChange.style.color = randNumber >= 0 ? 'green' : 'red';

<p id='tdChange'>This is a paragraph</p>

你也可以在jQuery中使用toggleClass方法。这将检查元素是否具有类。如果没有，它将添加该类，否则它将删除它。

var tdChange = $('#tdChange');
var numbers = [.03, .18, -.018];
var randNumber = numbers[Math.floor(Math.random() * numbers.length)];

if (Math.abs(randNumber) > .025) {
    tdChange.toggleClass('bold');
}

tdChange.toggleClass(randNumber >= 0 ? 'green' : 'red');

.bold { font-weight: bold; }
.green { color: green; }
.red { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='tdChange'>This is a paragraph</p>