初心者javascript ウィンドウサイズを変更したら実行するようにしたい

htmlで外部ファイルのjsを読み込む形をとっているのですが、
以下のサイトのjavascriptを、少し変えてウィンドウサイズを変更した時も、実行するようにしたいのですが、いまいちわかりません。
サイト：https://pixelog.net/post/2020/04/08/160424/
親要素からテキストがみ出てしまい、リロードすると親要素内にテキストが収まるのですが、リロードしないで収まるようにしたいです。また、ウィンドウを大きくした時にテキストが小さいままでなく、大きくなるのがベストです。

addelement();//←追加しました
function addelement(){//←追加しました
textAdjust('私のクラス');//←追加しました
textAdjust('私のクラス');//←追加しました
}
function textAdjust(Class) {
document.addEventListener('DOMContentLoaded', adjust);

function adjust(){
const title = document.getElementsByClassName(Class);
for(i=0; i < title.length; i++) {
title[i].style.display = 'block';
const contentWidth = title[i].clientWidth;
const font_size = document.defaultView.getComputedStyle(title[i],

title[i].style.display = 'inline-block';
title[i].style.whiteSpace = 'nowrap';
const titleWidth = title[i].clientWidth;

if(titleWidth > contentWidth){
const percent = Math.floor(contentWidth / titleWidth * 100);
const fontEm_size = percent / 100 + 'em';

title[i].parentNode.style.fontSize = font_size;
title[i].style.fontSize = fontEm_size;
}
}
}
}

//ウインドウサイズを変えたとき
window.addEventListener('resize', function(){　//←追加しました
addelement();　//←追加しました
});　//←追加しました

No.2 ベストアンサー 回答者： fujillin 回答日時： 2024/01/03 22:24

こんばんは

ご提示の textAdjust 関数は「ロード時に調整する関数を実行するようにバインドする」ものですので、その textAdjust 関数を呼び出しても、直接的には何も実行してくれません。
（全体の仕組みを理解できれば、理解できるはずと思いますけれど・・）

実際の処理を行っているのは adjust 関数の方ですので、こちらを独立して定義しておいて、ロード時、リサイズ時に呼び出せるようにしておけば良いでしょう。

仮に、指定するクラス名が固定で良いものとするなら、具体的には
　function adjust(){
　　const Class = '指定クラス名'; // 固定クラス名
　　// 以下はそのまま同じ
　}
と定義しておいて、
　window.addEventListener('DOMContentLoaded', adjust);
　window.addEventListener('resize', adjust);
のようにイベント処理として設定しておけば、お望みのように実行されるはずです。

※ ただし、ご質問文にご提示のスクリプトは文法的におかしいので、元のサイトに記述されているものを使う必要があります。
※ 複数のクラスに対応したい場合は、そのように変更する必要があります。
※ 上記の方法のままだと、グローバル変数としてadjust関数名が登録されますが、これを避けたければ、ロードイベントの処理として全体を記述しておけば宜しいでしょう。

（少しだけ、複雑になりますが・・）
　window.addEventListener('DOMContentLoaded', () => {
　　//関数定義（上記と同じ)
　　function adjust(){
　　　//処理内容
　　};
　　window.addEventListener('resize', adjust);
　　adjust();
　});
のような感じです。

※ 一方で、ご提示のサイトのスクリプトは、指定要素の文字サイズを変更するだけでなく、その親要素の文字サイズ指定も変更する仕組みになっているので、文書構造がそれに合致しないような場合にはおかしなことが発生しそうに思われます。
（意図しない部分の文字サイズが変わる可能性がある）


＞ウィンドウを大きくした時にテキストが小さいままでなく、大きくなるのがベストです。
ご提示のスクリプトの
　＞if(titleWidth > contentWidth){
の部分で大きくなる場合に処理をしないようにしていますので、この判断をせず、常にフィットさせるようにすれば良いでしょう。

この回答へのお礼

fujillinさん。いつもありがとうございます。
返事遅くなりました。お礼入力後にボタン押し忘れてました。回答の
「textAdjust 関数は「ロード時に調整する関数を実行するようにバインドする」ものですので」は理解できてませんでした。助かりました。
いただいた、アドバイスで修正してみます。
まだ、複数のクラスの渡し方が自信ないです。
const Class = '指定クラス名'; // 固定クラス名
で、１つは渡せると、分かりました。

お礼日時：2024/01/07 14:18

No.1 回答者： rera1016 回答日時： 2024/01/03 21:46

ウィンドウサイズの変更は"resize"なので、それに対してリスナーを設定しないと動きません。

https://www.javadrive.jp/javascript/event/index2 …