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ベストアンサー
- 回答日時:
こんばんは
ご提示の 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 = '指定クラス名'; // 固定クラス名
で、1つは渡せると、分かりました。
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 3 2023/12/17 01:07
- JavaScript HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない 7 2023/12/15 19:32
- JavaScript HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない 2 2023/12/18 18:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ 3 2023/12/25 16:07
- HTML・CSS HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま 3 2023/12/24 16:15
- JavaScript [初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。 4 2023/11/10 15:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptでiframeの内容を「...
-
SCRIPT5007: 未定義または NULL...
-
getElementsByNameで要素が取得...
-
function の return 値を表示し...
-
キーを押している間の時間を計...
-
return falseが効かない(F5キ...
-
ボタン押すたびに文字を送りたい
-
bodyタグのfocus
-
フォーカス移動抑止について
-
ページ全体を検索して特定文字...
-
JavaScriptでのEnterキーとAlt+...
-
黒背景で、白文字(リンク挿入...
-
<a href="#" …>の意味を教えて...
-
ポップアップウィンドウの位置
-
submitボタンで他のフレームを...
-
(Javascript)印刷するファイル...
-
確認ダイアログで「キャンセル...
-
ブラウザをJavaScriptで最小化…
-
ウィンドウ名の設定
-
bodyタグって2重にしようするこ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
getElementsByNameで要素が取得...
-
JavaScriptでiframeの内容を「...
-
キーを押している間の時間を計...
-
SCRIPT5007: 未定義または NULL...
-
JavaScriptでの西暦下2桁での表...
-
htaでVBSのソースを書いたらエ...
-
クリックすると別の文章を表示する
-
日付のチェック
-
AjaxでXMLの要素が取得できない
-
引数付きで呼び出す関数・配列...
-
JavaScriptでのEnterキーとAlt+...
-
【js】onsubmit属性が変更できない
-
フォーカス移動抑止について
-
bodyタグのfocus
-
AjaxでDBから取得したデータを...
-
IEの拡大・縮小機能をWebページ...
-
idHOGEで取得したinnerText(数...
-
iframeの中から親ページをスム...
-
function の return 値を表示し...
-
「オブジェクトを指定してくだ...
おすすめ情報

