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のfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
プログラミング言語の制作方法について
C言語・C++・C#
-
-
4
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
5
これの対応OSを教えて下さい。php-8.3.0-src.zip
PHP
-
6
HTMLで表をつくったのですがウィンドウの大きさを変化させると、表の真ん中の列だけ補足なり、表の中の
HTML・CSS
-
7
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
8
CSV出力を画面から選択したデータ項目のみを出力させたいです。
Java
-
9
Javascriptのhtml出力についてappendChildはどのような意味があるのでしょうか?
JavaScript
-
10
ワードプレスインストールできない
オープンソース
-
11
Linux Mint でも使えないですよね? お友達から、Windows vista AMD メモリ
UNIX・Linux
-
12
GitHubは初年度以外は有料になりますか?
Ruby
-
13
C言語って古いですか?
C言語・C++・C#
-
14
HTMLでデスクトップの画像がでない
HTML・CSS
-
15
HTMLでstyleを指定するフォームの作り方
HTML・CSS
-
16
コードレビューをお願いします。
JavaScript
-
17
HTMLで画像をポップアップで表示するようにする方法
HTML・CSS
-
18
[再掲]JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい
JavaScript
-
19
このように書くべきですか? { object = action() if(object.isSucc
その他(プログラミング・Web制作)
-
20
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
getElementsByNameで要素が取得...
-
フォーカス移動抑止について
-
jQuery ツールチップの中のリンク
-
日数カウントダウンをホームペ...
-
JavaScriptでのBMI計算について
-
画像のソースを変える(JavaScript)
-
Javascriptでカウントダウン
-
出荷予定日を表示するJavaスク...
-
JavaScript でキーを送る
-
乱数を一定時間毎に表示させた...
-
IEの拡大・縮小機能をWebページ...
-
ハイライト表示(タグの中を除...
-
SCRIPT5007: 未定義または NULL...
-
<script type="text/javascript...
-
ブラウザ上に固定させるメニュー
-
JavaScriptでiframeの内容を「...
-
Javascriptの出力結果をhtmlボ...
-
setContentに読み込んだファイ...
-
JavaScriptでページ全体にトラ...
-
Firefox/2 カーソルが砂時計の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
function の return 値を表示し...
-
getElementsByNameで要素が取得...
-
SCRIPT5007: 未定義または NULL...
-
JavaScriptでiframeの内容を「...
-
フォーカス移動抑止について
-
キーを押している間の時間を計...
-
JavaScript でキーを送る
-
bodyタグのfocus
-
ボタンのID名を取得するには?
-
JavaScriptでのEnterキーとAlt+...
-
リンク移動先のURLを取得
-
初心者javascript ウィンドウサ...
-
自動ジャンプでフォームデータ...
-
乱数を一定時間毎に表示させた...
-
jQuery ツールチップの中のリンク
-
idHOGEで取得したinnerText(数...
-
フレームサイズの変更について
-
AjaxでDBから取得したデータを...
-
JavaScriptでの西暦下2桁での表...
-
ページ全体を検索して特定文字...
おすすめ情報