JavaScriptの.createElement()で目次を生成して.nextElementSiblingでその目次をアコーディオン
JavaScriptで記事内の h タグから目次を作り、それをアコーディオンにして開閉させます。 コード量が多めですが、順に解説していきます。 目次.createElement()と.nextElementSibling …
JavaScriptの.querySelectorAll()でページのhタグを取得してモーダルに目次を生成
JavaScriptの.querySelectorAll() を使って、よくブログの記事の冒頭に設置される「目次」をネイティブなJavaScriptで生成して、それをモーダルの中に表示させてみます。 jQueryのライブ …
JavaScriptの.createElement()で要素を追加して.insertBefore()で挿入
.createElement()は、JavaScript だけで DOM を生成して描画するメソッドです。 このメソッドを使って要素を生成しただけでは何も描画されないので、.insertBefore() のメソッドと併用 …
JavaScriptの.toLocaleString()で数字の桁数を3桁カンマ区切り
金額を表記して桁数が多かった場合、その数字の3桁毎にカンマをポチポチ目視で打つのは地味に大変です。 そんな時、JavaScriptの .toLocaleString() という便利なメソッドで「3桁カンマ区切り」を一瞬で …
JavaScriptのwindow.alert()にdocument.titleでページのタイトルをアラート表示
JavaScriptの window.alert() を使って、ウィンドウのアラート表示にページのタイトルを表示させてみます。 このスニペットについて解説していきます。 目次window.alert()とdocument …
JavaScriptのdocument.titleでタイトルタグの書き換え
HTMLの title タグの文字列の書き換えを、JavaScriptのdocument.title プロパティを使って書き換えます。 使うシーンはあまりないかもしれませんが、そんなプロパティを使ったJavaScript …
JavaScriptの.createElement()でhタグを取得して目次を作成
ブログには使われることが多い「目次」を、ページ内の h タグを取得して表示させます。この動的なものを、ネイティブのJavaScriptで実装してみます。 目次.createElement()記事内のhタグを取得した目次の …
JavaScriptの.getBoundingClientRect()で蛍光マーカー風の下線
ブログの記事内で、強調をしたい箇所によく使われる「蛍光マーカー風の下線」を、スクロールして表示領域に入ったら表示されるスニペットをネイティブなJavaScriptで作ってみました。 色の変更や、カスタマイズも比較的簡単な …
JavaScriptのwindow.alert()でアラート表示
JavaScriptの window.alert() を使って、ボタンクリックでダイアログを表示します。 あまり使うことはないかもしれませんが、そんなアラート表示について解説していきます。 目次window.alert( …
JavaScriptの厳密等価演算子 ( === )で指定した文字列を持つタグにclassを付与
WordPressでも、同じ処理を何回か繰り返したい場面によく使う「ループ」は、JavaScriptでもforなどの構文で、あります。 この記事では、JavaScriptの厳密等価演算子 ( === )と、そんなループを …
