TIL

Today I Learned. 知ったこと、学んだことを書いていく

classを操作 - JavaScript

element.classListを使うことでclassの操作ができる
GItHubのページでもclassListを使っていた

add

classの追加ができる

element.add("class-name");

また、一度に複数追加することもできる

element.add("class-name1", "class-name2");

remove

classの削除ができる

element.remove("class-name");

item

使う時が来たら書く

toggle

classがすでにあれば削除、なければ追加

element.toggle("class-name");

contains

classが含まれていれば、True

replace

使う時が来たら書く

参考文献

タブの表示 2 - CSS

CSSだけでタブを表示するやつを昨日書いたけど、他にもいい方法がないか探していたところ、JavaScriptで追加し他要素にも対応できそうな書き方があったため、実装してみた

↓昨日書いたやつ

タブの表示 - CSS - TIL

See the Pen dmEGry by tamago (@tamago324) on CodePen.

<ul>
  <li id="tab1"><label for="radio1">TAB 1</label></li>
  <li id="tab2"><label for="radio2">TAB 2</label></li>
  <li id="tab3"><label for="radio3">TAB 3</label></li>
</ul>
<div>
  <input id="radio1" class="tab-input" type="radio" name="tab-input">
  <div class="content">CONTENT 1</div>
  <input id="radio2" class="tab-input" type="radio" name="tab-input">
  <div class="content">CONTENT 2</div>
  <input id="radio3" class="tab-input" type="radio" name="tab-input">
  <div class="content">CONTENT 3</div>
</div>
.tab-input {
  display: none;
}

.content {
  display: none;
}

[id^="radio"]:checked + div {
  display: block;
}

ポイント

ラジオボタンとコンテンツは隣同士にする

関連するラジオボタンとコンテンツを隣同士にすることでCSS+が使えるようになる
+は隣の要素という意味
ラジオボタンにチェックが付いたら隣のdivを表示する といったような事ができる

<input id="radio1" class="tab-input" type="radio" name="tab-input">
<div class="content">CONTENT 1</div>
[id^="radio"]:checked + div {
  display: block;
}

正規表現的なセレクタを使う

[id=^"radio"]のような正規表現みたいな感じでスタイルを設定できる
[id=^"radio"]は「idがradioで始まる要素」というセレクタになる

[id^="radio"]:checked + div {
  display: block;
}

参考文献

タブの表示 - CSS

こっちの書き方のほうが好き

タブの表示 2 - CSS - TIL


こんな感じのタブ!!!

See the Pen qowGpN by tamago (@tamago324) on CodePen.

ポイント

ラジオボタンの非表示

ラジオボタンは見せなくていいから非表示にする

input[type="radio"] {
  display: none;
}

ラベルを横並びにしてタブっぽく

横並びにすることでタブっぽくなる

.tab-item {
  /* 横並びにしている */
  display: block;
  float: left;
}

コンテンツのデフォルトは非表示

デフォルトは非表示にすることで、一つだけ表示ができるようになる

.tab-content {
  display: none;
}

clear-fixでfloatの解除

clear-fixという技術を使うとfloatの解除ができる
clear-fixについてはfloatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17を参考にした

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

選択されたものに紐付けてコンテンツを表示

xxx:checked ~ yyyyxxxにチェックがついているときのyyyのスタイルを設定する

IDじゃないといけないのかな??JavaScriptで追加した要素に対してはどうしようかな...

#tab1:checked ~ #tab1-content,
#tab2:checked ~ #tab2-content, 
#tab3:checked ~ #tab3-content{
  display: block;
}

テキストディタにタブを付けたい!!!タブの作成とか、削除とかもやりたい!!!

参考文献

枠線 outline - CSS

outlineプロパティを使うことでinputやtextareaの枠線のスタイルを設定できる
輪郭線ともいう?また、:focusを使うことでフォーカス時の枠線の表示をすることもできる。

outline: 太さ 色 線の種類;

いろいろためしてみた

See the Pen フォーカス時の枠線 outline by tamago (@tamago324) on CodePen.

Chromeはoutlineプロパティにデフォルトでoutlineのスタイルが設定されているため、青枠が表示されるのかな?

参考文献

イベントの追加 addEventListener() - JavaScript

クリックしたときに何か処理をしたいときとかに使う
イベントに対しての処理を追加するにはaddEventListener()で追加する

element.addEventListener(イベント名, 呼び出す関数);

イベント名はclickkeyupなどたくさんある

例)ボタンをクリックしたときにアラートを表示

const alertTest = (event) => {
  alert("click!");
};

document.getElementById("button").addEventListener("click", alertTest);


See the Pen ZxPmZv by tamago (@tamago324) on CodePen.

参考文献

イベントのキャンセル event.preventDefault() - JavaScript

例えば、inputやtextarea内でtabキーを入力したとする。するとフォーカスが外れる
もし、無効化したい場合、event.preventDefault()を使用すればいい

const disableTab = (event) => {
  if (event.key === "Tab") {
    event.preventDefault();
  }
};

/* キー押下時のイベントに追加 */
document.querySelector(".editor").addEventListener("keydown", disableTab);

event.preventDefault()はイベントが無効にできる場合、無効にするメソッドらしい
tabキーにはデフォルトで「次のフォーム部品にフォーカスを移動する」というイベントがあるということなのかな?

例)tabキーを押した時のフォーカス移動を無効化

See the Pen textareaでtabキー入力時のフォーカス移動無効化 by tamago (@tamago324) on CodePen.

参考文献