要約DOMContentLoaded...スタイルシート・画像などの読み込みが完了してない状態で発生。DOMの読み込みと解析が終わった状態。load...スタイルシート・画像などの読み込みが全て完了した時点で発生する。順序は、loadがあとに呼ばれる。要約のサンプルコードは下に。スタイルシートの読み込みが完了しているので、高さを正しく設定できる。スタイルシートや画像、サブフレームの読み込みが不要ならこちらでいい。doSomething();});経緯スタイルシートで要素の大きさ(縦横の長さ)を指定して、最後にJavascriptで高さを%で調整する場面があった。(私のCSSの理解不足かもしれないが)そのときに、イベントハンドラを設定するイベントタイプは何がいいかと調べたら、loadとDOMContentLoadedの2つが見つかった。何が違うかとドキュメントをよく読んだ結果、スタイルシートの読み込みが完了しているloadが最適という具合になった。DOMContentLoadedのタイミングMDNには次のような記述がある。初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。今回引っかかったのは、スタイルシートの読み込みが完了してないというところ。これが終わってないから、特定の要素の高さの設定が済んでない状態になり、Javascriptでの要素の高さ(%)指定がうまくいかなくなっていた。ちなみにこのイベントで高さ指定すると、ウィンドウ下部に空白ができたりできなかったりする。スタイルシートの読み込みとイベントハンドラのコールタイミングのせいだと思われる。した意図しない状況になってしまうため、コードで高さを調整する場合は、このイベントは不適切になる。loadのタイミングこちらはスタイルシートの読み込み完了後に呼ばれる。MDNにも記述がある。イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。スタイルシートの読み込みが完了しているので、コードからの高さ指定は問題なく行うことができる。このイベントは、window.onloadに関数を指定するのと同じもののようだ。おわりにDOMContentLoadedの方が適切な場面もあるが、今回の場合は、loadを使う方が適切だと思う。スタイルシートや画像などの後に行うことならloadだと思っておくことにする。ちなみに、documentとwindow.documentは同じもの。PCで主にWebサイトのGUIを調整していると、スマホなどのタッチスクリーン端末では、違和感が生じたりする。$(docum...JavascriptJavascriptで非インタラクティブなアニメーションを作る冬っぽい雪が降るだけのアニメーションをjavascriptで作った。動いたままになるので、バッテリー残量注意。canvasを直に操作するの...JavascriptJavascriptでページの高さの変更をチェックするJavascriptでページ全体の高さを検知する方法2つ。ikapblogのように、目次をハイライトする場合は、ページ内の章節となる各コンテンツの座標を取得・保持しておくために...WebサービスWebブラウザ上でmdをhtmlに変換する簡易エディタを作った以前、記事をMarkdownで書いてhtmlに変換してからアップするという流れを作った。bash上でコマンドによりhtmlに変換しているので、bashが操作できる環境でないと、変換作業ができない。双方イベントリスナー内で使うことが多い。イベントインターフェースのメソッドだからリスナーで処理するだろう。stopPro...CSS3通りのmarquee幅が足りない時は文字をスクロールさせる。電光掲示板のようなスクロール。凝った動きをしな...vscodeのdevcontainer内でelectronのGUIアプリを作りたかったnodejsのhttp(s)モジュールでリダイレクトを処理するホームJavascriptikapper主にITなどのアウトプットをしています。ご連絡等はTwitterの@ikapperへ。ikapblog.メニューホーム文字in画像QRIPアドレス確認ホーム検索トップサイドバータイトルとURLをコピーしました。