はじめに 以前、classList でクラスを操作する覚書をしたが、IE ではそのうちのtoggle() が使えない沼に一瞬だけハマった。 解決方法 classList の.add() と .remove() 、そして contains() をうまく使えば解決する。 // HTML <p class="togglclassBtn">click me!</p> <p class="change_color">HELLO!</p> // SCSS .tog…

undefined になる let list = { hoge: 000, fuga: 001, piyo: 002 }; console.log(list.length) // undefined undefined になる理由は オブジェクトに length は効かないとのこと。 オブジェクトについては下記、参照。 JavaScriptでは、数値も文字列も配列…

サンプルコード <button class="fnBtn">function</button> <button class="arrowThis">() => this</button> <button class="arrowEvent">() => event.currentTarget</button> <script> // 従来のfunction() 用いた通常関数で this の値を取得する const fnBtn = document.querySelector('.fnBtn'); fnBtn.addEventListen…

サンプルコード <p class="a">A</p> <p class="a">A</p> <p class="a">A</p> <button class="js-triger">文字色を変更する</button> <script> const btnTriger = document.querySelector('.js-triger'); btnTriger.addEventListener('click', ()=>{ const all = document.querySelectorAll('.a'); console.log(all); // Node…

セレクタ取得で複数否定するには まずは１つを否定する const elm = document.querySelectorAll('.class:not(.notClass)'); :not(否定する要素)で否定する要素を指定する。 気になる複数否定は const elm = document.querySelectorAll('.class:not(.notClass…

サンプルコード const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]'); for (let i = 0; i < smoothScrollTrigger.length; i++){ smoothScrollTrigger[i].addEventListener('click', (e) => { e.preventDefault(); const href = smoothSc…

サンプルコード サイトを100px以上スクロールした時に背景を黒にする。 <script> window.addEventListener("scroll", function(){ const scrollPos = document.querySelector('html') const rectTop = scrollPos.getBoundingClientRect().top const scrollHeight = r…

サンプルコード クリックでクラスをトグルさせる <button class="base_class_01">クリックでクラスをつけたり外したりする</button> <script> const toggleClass = document.querySelector('.base_class_01'); // クリックでクラスがトグルする toggleClass.addEventListener('click', ()=>{ toggleClass.cla</script>…

サンプルコード const target = document.querySelectorAll('.js-click'); for (let i = 0; i < target.length; i++) { target[i].addEventListener('click', function(){ alert('hoge'); }); }; 概要 querySelectorAllで複数ある.js-clickというクラスをす…

代表コード target.addEventListener(イベント, 関数, オプション); 良く使うサンプルコード const target = document.querySelector('.target'); target.addEventListener('click', function(){ alert('hoge') }); クリックした時に「hoge」とアラート表示…