# ＜JavaScript＞＜リメイク＞表示非表示切り替え色々してみた

夏の自由研究

今回は過去記事のリメイク的な何かです対象の記事は以下から

poolbooyer.hatenablog.jp

表示非表示切り替えというかJSでスタイルを触る方法的な話

1. 前回の振り返り

まずは前回の振り返りから
そもそもこれでやりたかったことから振り返っていきましょう

ボタンを押すと表示
再度押すと非表示

簡単ですね、脳死で実装できそうです。
そのためにあの時はsetAttributeを使いました
コードでいうと以下のような感じ

var display = function(tab) {
    //切り替えるタブを確認する
    if (tab == 0) {
        //ボタンを押されなかった方を閉じるタブに指定
       close= 1;
   } else {
       close = 0;
    }
    //切り替える対象を取得
   var pane = document.getElementsByClassName("data");
   //表示する
   pane[tab].setAttribute("style", "display:inline");
   //非表示にする
  pane[close].setAttribute("style", "display:none");
}

これだとボタンが実は増えてるっていう
この時の自分は何を考えていたのでしょうということで、単一ボタンで切り替えるパターンを考えてみました。

2.今回試すこと

今回は以下の表を元に4つを試します

	onclick	Eventlistener
style属性変更	1	3
class追加	2	4

今回はスタイルを直接要素に与えるパターンとクラスを追加するパターンの2つを作ります
その上で、トリガーをonclickとeventlistenerの2パターンで比較してみます

3.作ったコード

今回作ったものはcode Penで以下からご確認あれって感じです

See the Pen jsでスタイルを切り替えるパターン試し集 by poolbooyer (@poolbooyer) on CodePen.

4.試した感想

1.style属性変更

スタイルの状態を持ってきて比較してっていうこともあり、コードは長くなります
あとは、JSをあんまり簡単にいじれない状況で使うとかの場合はあまりお勧めできないと思います

2.class追加

classListのtoggleを使ったのでJS単体で見たときにはスッキリしたコードになります。その分CSSを書く必要はありますが、デザイン面で変更とか、見た目に手を入れたいときにはCSSのみでいいのでJSの知識がなくてもいい感じになります

3.トリガー周り

正直な話、今回の内容だとそんなに違いがない気もしました(ダバダ〜）
もうちょい調べて悟り開きます

ということで、リメイク記事でした。今後もリメイク書いていこうかなと思います。

にーやまの活動記録