ある要素の前に追加 insertBefore - JavaScript
指定要素の前に要素を追加するにはelement.insertBefore()
を使う
element.insertBere(追加要素, 起点要素)
elementの中にある「起点要素」の前の位置に「追加要素」を追加する っていう感じ
実際にやってみた
sub2の前に要素(青い要素)を追加する
See the Pen 指定の要素の前に追加 by tamago (@tamago324) on CodePen.
<div class="main"> <div class="sub default">sub1</div> <div class="sub default" id="ref">sub2</div> <div class="sub default">sub3</div> </div>
// 親要素 const main = document.querySelector(".main"); // 追加要素の作成 const sub4 = document.createElement("div"); sub4.classList.add("sub", "add"); // 起点要素 const ref = document.querySelector("#ref"); main.insertBefore(sub4, ref);
mainの中にあるrefの前にsub4を追加
参考文献
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
使う時が来たら書く
参考文献
親要素の取得 - JavaScript
element.parentNode
を使う
<div class="main"> main <div class="sub">sub</div> </div>
const subElem = document.querySelector('.sub'); const mainElem = subElem.parentNode; alert(mainElem.innerText);
参考文献
タブの表示 2 - CSS
CSSだけでタブを表示するやつを昨日書いたけど、他にもいい方法がないか探していたところ、JavaScriptで追加し他要素にも対応できそうな書き方があったため、実装してみた
↓昨日書いたやつ
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
こっちの書き方のほうが好き
こんな感じのタブ!!!
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 ~ yyyy
でxxx
にチェックがついているときの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(イベント名, 呼び出す関数);
イベント名はclick
やkeyup
などたくさんある
例)ボタンをクリックしたときにアラートを表示
const alertTest = (event) => { alert("click!"); }; document.getElementById("button").addEventListener("click", alertTest);
See the Pen ZxPmZv by tamago (@tamago324) on CodePen.