このチュートリアルでは、JavaScript を使用して、別の要素の高さのパーセンテージ計(jì)算に基づいて HTML 要素の高さを動(dòng)的に調(diào)整する方法を説明します。この記事では、高さの関連付け設(shè)定を?qū)g現(xiàn)するために JavaScript を使用して DOM 要素を選択および走査する方法について詳しく説明し、そのような操作を?qū)g行する場合、計(jì)算精度とレイアウトの安定性を確保するには、少なくとも 1 つの要素に明確なまたは計(jì)算可能な基本高さが必要であることを強(qiáng)調(diào)します。これは、応答性の高い、または適応性のあるユーザー インターフェイスを作成するために非常に重要です。

フロントエンド開発では、ある HTML 要素の高さを別の要素の高さの一定の割合に設(shè)定する必要がある狀況によく遭遇します。たとえば、外側(cè)のコンテナ div.a があり、その中に div.b が含まれており、div.b の高さを常に div.a の高さの特定の割合 (たとえば、div.a の高さから 5% を引いたもの) にしたいとします。 CSS は、親要素と子要素の高さのパーセンテージを扱う場合 (例: 子要素の高さを 100% に設(shè)定する) には強(qiáng)力ですが、兄弟要素や間接的な親子関係に基づく高さになる場合、またはより複雑な數(shù)學(xué)的操作 (固定パーセンテージを減算するなど) を?qū)g行する必要がある場合には、JavaScript がより柔軟で強(qiáng)力なソリューションを提供することがよくあります。

相関高さの計(jì)算原理

要素 B の高さを要素 A の高さの何パーセントに設(shè)定したいとします。たとえば、ターゲットが高さ B = 高さ A - 5% であるとします。この式は次のように変換できます: heightB = heightA - (0.05 * heightA)heightB = heightA * (1 - 0.05)heightB = heightA * 0.95

これは、要素 A の実際の計(jì)算された高さを取得できる限り、単純な乗算演算を通じて要素 B の目標(biāo)高さを取得できることを意味します。この計(jì)算を意味のあるものにするには、少なくとも 1 つの要素 (この場合は要素 A) に明示的な計(jì)算可能な底面高さがある必要があることに注意してください。この基本の高さは、CSS で明示的に設(shè)定された固定値 (200px など) にすることも、コンテンツによって引き伸ばされた高さ、または親要素によって割り當(dāng)てられた高さにすることもできます。

JavaScriptの実裝方法

JavaScript を使用してこの関連高さ調(diào)整を?qū)g裝するための中心的な手順には、ターゲット要素の選択、ベース要素の高さの取得、ターゲット要素の高さの計(jì)算、および計(jì)算結(jié)果のターゲット要素への適用が含まれます。

1. DOM要素の選択

まず、DOM セレクターを通じて操作する必要がある HTML 要素を取得する必要があります。通常、document.querySelectorAll() を使用して、特定のクラス名またはタグ名を持つ要素のコレクションを取得します。

HTML 構(gòu)造が次のようになっていると仮定します。

 <div class="コンテナ">
    <div class="a">
        <!-- 外部 div コンテンツ -->
        <p>これは、高さがベースとして使用される外側(cè)の div です。 </p>
        <p style="height: 100px;"></p> <!-- サンプルコンテンツ。一定の高さを確保してください -->
    </div>
    <div class="a">
        <p>別の外側(cè)の div。 </p>
        <p style="height: 150px;"></p>
    </div>
</div>

<div class="コンテナ">
    <div class="b">
        <!-- 內(nèi)部 div の內(nèi)容、高さは対応する .a に従って調(diào)整されます -->
        <p>これは內(nèi)部 div であり、その高さは対応する外部 div の 95% になります。 </p>
    </div>
    <div class="b">
        <p>もう 1 つの內(nèi)部 div。 </p>
    </div>
</div>

注:元の質(zhì)問では、div.a と div.b はネストされた関係ですが、提供されているコード例は水平関係です。より一般的で元の質(zhì)問の意図と一貫性を保つために (コード例はフラットですが)、a と b のセットが複數(shù)存在し、それらの間に何らかの対応がある (たとえば、順番に) と仮定します。入れ子になっている場合は、querySelectorAll('.a > .b') の方が簡単です。デモンストレーションの便宜上、並列かつインデックスベースの方法で処理します。

 // 1. ターゲット要素を取得します // クラス 'a' を持つすべての外部 div を取得します
const innerDivs = document.querySelectorAll('.a'); 
// クラス「b」のすべての內(nèi)部 div を取得します
const innerDivs = document.querySelectorAll('.b');

// 範(fàn)囲外のインデックス作成を避けるために、要素の數(shù)が一致していることを確認(rèn)します if (outerDivs.length !== innerDivs.length) {
    console.warn("警告: 外部 div と內(nèi)部 div の數(shù)が一致していないため、一部の要素が正しく処理されない可能性があります。");
    //実際のアプリケーションでは、特定のニーズに応じてエラーをスローするかロジックを調(diào)整するかを選択できます}

2. 走査と計(jì)算

要素のコレクションを取得した後、要素を反復(fù)処理して、要素の各ペア (またはそれぞれ) の高さを計(jì)算して設(shè)定する必要があります。

 externalDivs.forEach((outerDiv, インデックス) => {
    const innerDiv = innerDivs[インデックス]; // 現(xiàn)在のouterDivに対応するinnerDivを取得します。

    // 対応する innerDiv が存在するかどうかを確認(rèn)します if (!innerDiv) {
        console.warn(`インデックス ${index} に対応する內(nèi)部 div が見つかりませんでした?，F(xiàn)在の反復(fù)をスキップします。`);
        戻る; 
    }

    // 2. 外側(cè)の div の計(jì)算された高さを取得します // getComputedStyle() メソッドは、要素の最終的に使用されるすべての CSS プロパティ値を含むオブジェクトを返します。
    // その値は、「200px」などの単位を含む文字列です。
    const innerDivComputedStyle = window.getComputedStyle(outerDiv);
    const 外側(cè)DivHeightStr = 外側(cè)DivComputedStyle.height; 

    //數(shù)値部分を抽出して浮動(dòng)小數(shù)點(diǎn)數(shù)に変換します。
    // parseFloat() は文字列を解析し、浮動(dòng)小數(shù)點(diǎn)數(shù)を返します。
    const externalDivHeight = parseFloat(outerDivHeightStr);

    // 実効高さが正常に取得できたか確認(rèn) if (isNaN(outerDivHeight) || innerDivHeight <h4> style.height と setAttribute('height', ...) の違い</h4><p>元の回答で言及されている高さを設(shè)定するには、div.style.height と div.setAttribute('height', ...) の 2 つの方法があります。</p>

• element.style.height = '...' : これは、要素のインライン スタイルを直接設(shè)定するための標(biāo)準(zhǔn) CSS DOM API です。
  などの要素の style 屬性を変更します。このアプローチは、要素の視覚的な表示を変更する場合に推奨される方法です。
• element.setAttribute('height', '...') : HTML要素の屬性を設(shè)定するメソッドです。 height 屬性は主に、、、

注意事項(xiàng)

1. ベースの高さの重要性:計(jì)算のベースとして使用される要素 (outerDiv など) に明示的な高さがあることを確認(rèn)してください。高さが自動(dòng)で、それを伸ばすコンテンツがない場合、getComputedStyle().height は 0px またはその他の予期しない値を返し、計(jì)算エラーが発生する可能性があります。

2. 単位処理:高さを取得する場合、getComputedStyle().height は単位付きの文字列 (「100px」など) を返します。値を抽出するには parseFloat() を使用する必要があります。高さを設(shè)定するときは、単位 (px など) を追加し直す必要があります。そうしないと、ブラウザーが正しく解析できない可能性があります。

3. 動(dòng)的なサイズ変更:ウィンドウのサイズ変更、コンテンツの変更、またはレスポンシブ レイアウトによってベース要素の高さが変更される可能性がある場合、上記のコードはページの読み込み時(shí)に 1 回だけ実行されます。高さが常に同期されていることを確認(rèn)するには、関連するイベントをリッスンする必要があります。

   • window.addEventListener('resize', ...) : ブラウザーのウィンドウ サイズが変更されたときに、高さ計(jì)算ロジックを再実行します。
   • MutationObserver : 基本要素やスタイル屬性の內(nèi)容の変更など、DOM ツリー內(nèi)の変更を監(jiān)視し、再計(jì)算をトリガーします。
   • ResizeObserver : 要素のコンテンツ領(lǐng)域のサイズ変更を監(jiān)視するために特別に設(shè)計(jì)された API で、MutationObserver よりも効率的かつ直接的です。

    // さまざまなイベントで関數(shù)AdjustDivHeights() {を呼び出すために関數(shù)にカプセル化します。
       externalDivs.forEach((outerDiv, インデックス) => {
           const innerDiv = innerDivs[インデックス];
           if (!innerDiv) が戻る;
   
           const innerDivHeight = parseFloat(window.getComputedStyle(outerDiv).height);
           if (isNaN(outerDivHeight) || innerDivHeight  {
   // for (エントリを入力させます) {
   // if (entry.target.classList.contains('a')) {
   // // 対応する .b 要素を見つけて再計(jì)算します // const Index = Array.from(outerDivs).indexOf(entry.target);
   // if (index !== -1 && innerDivs[index]) {
   // const externalDivHeight =entry.contentRect.height;
   // const targetInnerHeight = innerDivHeight * 0.95;
   // innerDivs[index].style.height = `${targetInnerHeight}px`;
   // }
   // }
   // }
   // });
   // externalDivs.forEach(div =>sizeObserver.observe(div));

4. パフォーマンスに関する考慮事項(xiàng):この方法で高さを動(dòng)的に調(diào)整する必要がある要素がページ上に多數(shù)ある場合、DOM クエリやサイズ変更イベントでのスタイル変更を頻繁に実行すると、ページのパフォーマンスに影響を及ぼす可能性があります。この場合、スロットル関數(shù)またはデバウンス関數(shù)を使用して、adjustDivHeights の実行頻度を制限することを検討してください。

要約する

JavaScript を使用すると、HTML 要素間の複雑なパーセンテージベースの相関の高さの調(diào)整を柔軟に実裝できます。中心となるのは、ベース要素の計(jì)算された高さを正確に取得し、數(shù)學(xué)的演算を?qū)g行して、その結(jié)果をターゲット要素の style.height プロパティに適用することです。ソリューションの堅(jiān)牢性と応答性を確保するには、ベースの高さの妥當(dāng)性、単位の処理、ウィンドウのサイズ変更などの動(dòng)的な狀況で計(jì)算が再トリガーされる方法についても考慮する必要があります。一部の単純な同じ高さのレイアウト シナリオでは、CSS フレックスボックスまたはグリッド レイアウトがより洗練されたソリューションを提供する場合がありますが、複雑な數(shù)學(xué)的計(jì)算や間接的な親子関係を伴う動(dòng)的なパーセンテージ調(diào)整の場合、JavaScript は依然として不可欠かつ強(qiáng)力なツールです。