特定の文字列に応じてCSSの適用を変えるためのJavaScriptを教えてください。

Question

質問失礼します。

特定の文字列に応じてCSSの適用を変えるためのJavaScriptを教えていただけないでしょうか。
WordPressのカスタムフィールドで「未確認」もしくは「確認」という表示ができる設定をしているのですが、
「未確認」のときは赤色、「確認」のときは青色にしたいです。

何卒よろしくお願いいたします。

Comments

[eneko0513]

作りかけのものがあるならソースや画面キャプチャ等を共有してください。

[Lhankor_Mhy]

コードをご提示ください。「未確認」もしくは「確認」という表示の周辺で結構です。

[bluemarron]

申し訳ありませんでした。
コードは以下の通りです。

<table>
<tbody>
<tr>
<th>ステータス</th>
<td>未確認</td>
</tr>
</tbody>
</table>

<table>
<tbody>
<tr>
<th>ステータス</th>
<td>確認</td>
</tr>
</tbody>
</table>

「未確認」のときはcolor: red;、
「確認」のときはclor: blue;
にしたいです。

Answer 1

こんな感じでどうでしょう。

.mikakunin {
  color: red;
}

.kakunin {
  color: blue;
}

let a = document.querySelectorAll("td");
for (var i = 0; i < a.length; i++) {
  if (a[i].innerText == "未確認") {
    a[i].classList.add("mikakunin");
  } else if (a[i].innerText == "確認") {
    a[i].classList.add("kakunin");
  }
}

javascript単体で完結させるなら下です。

let a = document.querySelectorAll("td");
for (var i = 0; i < a.length; i++) {
  if (a[i].innerText == "未確認") {
    a[i].style.color = 'red';
  } else if (a[i].innerText == "確認") {
    a[i].style.color = 'blue';
  }
}

Comments

[eneko0513]

本来ならまず未確認と確認の所にそれぞれclassとかname, idをそれぞれ振っておくべきで
それを素に色を変えるのがベストプラクティスです。
tdから逆引きで文字列を見て色を変えるというのはあまり無いと認識しています。

[bluemarron]

解決できました！
本当にありがとうございます。
仰る通りなのですが、カスタムフィールドで出力しているなどの関係で、
classなどをつけられない（正確にはつけたくない）ので困っていた次第です。