JavaScriptで文字色の変更

Question

function showTestList(testList) {
  var html = ''
  if (testList != null) {
    for (var i = 0; i < testList.length; i++) {
      html += '<span class="list_type">' + 'type: ' + testList[i].type + '</span>';
    }
  }
}

testList[i].typeがAというタイプだった時のみ文字色を変えたいのですがどうしたらいいでしょうか？

Answer 1

forの中の一番最後に

if(testList[i].type == A){
  getElementByClassName("list_type").classList.add("osukina-color");
}

cssも一応

.osukina-color{
  color: red;
}

とすればいいのではないでしょうか。

Comments

[teruri]

タッチの差で遅かったし恥ずかしいｗ

Answer 2

HTMLで文字の色を変更するにはクラスを付与するか、style属性にCSSを直接書き足して実装します。

• クラス付与: <span class="list_type red"> ←このように半角スペースで区切る事で複数クラスを宣言可能
• style属性: <span class="list_type" style="color: red;">

testList[i].typeがAというタイプだった時のみ文字色を変えたい

上記を踏まえてJSのコードに落とし込んだ場合、if文か三項演算子で実現させます。
今回はif文で記載してみます。

function showTestList(testList) {
  var html = ''
  if (testList != null) {
    for (var i = 0; i < testList.length; i++) {
      if (testList[i].type === 'A') {
        html += '<span class="list_type red">' + 'type: ' + testList[i].type + '</span>';
      } else {
        html += '<span class="list_type">' + 'type: ' + testList[i].type + '</span>';
      }
    }
  }
}

---

【おまけ】更にかっこいい書き方

既存のコードでは同じような行が2つ存在しています。
これを一つにまとめてみます。

色々方法はありますが、クラスが1個か2個かなのでその編を考慮してみました。
(上記採用されなかった三項演算子も使ってみます)

function showTestList(testList) {
  var html = ''
  if (testList != null) {
    for (var i = 0; i < testList.length; i++) {
      var classes = testList[i].type === 'A' ? ['list_type', 'red'] : ['list_type'];
      html += '<span class="' + classes.join(' ') + '">' + 'type: ' + testList[i].type + '</span>';
    }
  }
}

Comments

[teruri]

早いしかっこいい！！