JavaScript ボタンがオフになったらcssを適用させないようにしたい

Question

やりたいこと

下記cssをjsで適用させたりさせなかったりしたいです。

  .chat-author__display-name{
  font-size: 0;
 }

 .chat-author__intl-login{
   display: none !important;
 }

 span[data-test-selector="chat-message-separator"]{
   display: none !important;
 }

 .chat-scrollable-area__message-container > :nth-child(even) {
   background-color: #f5f5f5;
 }


  .chat-line__username-container span{
    display: none !important;
  }

Comments

[maisumakun]

具体的に、何をどうしたいのですか？

[tetro]

ボタンのオンオフでcssを適用させたりさせなかったりしたいです。

[tetro]

querySelectorとかで取得して書き換えれないかなって思ってます。

Answer 1

https://shanabrian.com/web/javascript/remove-class.php
ボタンが押されたらクラスを削除したりつけるようなロジックを組めば良いかと。

要素をquerySelector使って取得してその内容からクラスを削除するようにしてみて下さい。

Comments

[tetro]

ありがとうございます！
あとすみませんが、chat-scrollable-area__message-container > :nth-child(even)　をjsで指定する方法ってありますかね？

[think49]

https://teratail.com/questions/323504#reply-448782
新規ルール追加のJS制御はお勧めしませんが…。

[tetro]

URL先のやり方で指定してみたのですが、指定したクラスの全体に適用させる方法ってありませんか？
var test = document.querySelectorAll(".chat-scrollable-area__message-container > :nth-child(even)");
で指定して
test.classList.add(".testClass");
と書き換えようとしたのですが、
test[i].classList.add("testClass");
と配列を指定しなければならないようで、全体には適用されませんでした。

[think49]

for-ofかforEachで繰り返し処理しましょう

[tetro]

やっぱりその方法しかないですよね...
ありがとうございました!

[think49]

出来るかできないかは、querySelectorAll()の返り値を見て判断しましょう。

var test = document.querySelectorAll(".chat-scrollable-area__message-container > :nth-child(even)");
console.dir(test);

合わせて出来る方法の値も確認しましょう。

console.dir(test[0]);

「classListがどこに生えているのか」を理解してください。
でなければ、同じ事を繰り返します。
(例: test.addEventListenerが使えません)

[eneko0513]

think49さんご対応ありがとうございました。