セレクタ取得で複数否定するには まずは１つを否定する 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>…

Bootstrapに準ずる間違いない最新メディアクエリ デバイスの種類が増え続け、たびたび悩まされているメディアクエリの数値。長いものには巻かれろ理論でBootstrapに巻かれことにした。 ブレークポイント 接頭辞 ビューポートの範囲 極小（X-Small） なし <57…

サンプルコード 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」とアラート表示…