本教程探討如何使用JavaScript動態(tài)調(diào)整HTML元素的高度，使其基于另一個元素的高度進(jìn)行百分比計算。文章將詳細(xì)闡述通過JavaScript選擇并遍歷DOM元素，實現(xiàn)高度的關(guān)聯(lián)式設(shè)置，并強(qiáng)調(diào)在進(jìn)行此類操作時，至少一個元素需要有明確或可計算的基準(zhǔn)高度，以確保計算的準(zhǔn)確性和布局的穩(wěn)定性。這對于創(chuàng)建響應(yīng)式或自適應(yīng)的用戶界面至關(guān)重要。

在前端開發(fā)中，我們經(jīng)常會遇到需要將一個HTML元素的高度設(shè)置為另一個元素高度的某個百分比的情況。例如，有一個外部容器 div.a，其內(nèi)部包含一個 div.b，我們希望 div.b 的高度始終是 div.a 高度的某個特定百分比（例如，div.a 高度減去 5%）。雖然CSS在處理父子元素的百分比高度時具有強(qiáng)大的能力（例如，子元素設(shè)置 height: 100%），但當(dāng)涉及到基于兄弟元素、非直接父子關(guān)系，或者需要進(jìn)行更復(fù)雜的數(shù)學(xué)運(yùn)算（如減去一個固定百分比）時，JavaScript往往能提供更靈活和強(qiáng)大的解決方案。

關(guān)聯(lián)式高度計算原理

假設(shè)我們希望將元素B的高度設(shè)置為元素A高度的某個百分比。例如，如果目標(biāo)是 heightB = heightA - 5%。 這個表達(dá)式可以轉(zhuǎn)換為： heightB = heightA - (0.05 * heightA)heightB = heightA * (1 - 0.05)heightB = heightA * 0.95

這意味著，只要我們能獲取到元素A的實際計算高度，就可以通過簡單的乘法運(yùn)算得出元素B的目標(biāo)高度。需要注意的是，為了使這個計算有意義，至少有一個元素（在本例中是元素A）需要有一個明確的、可計算的基準(zhǔn)高度。這個基準(zhǔn)高度可以是CSS中顯式設(shè)置的固定值（如 200px），也可以是其內(nèi)容撐開的高度，或者是其父元素賦予的高度。

JavaScript 實現(xiàn)方法

使用JavaScript實現(xiàn)這種關(guān)聯(lián)式高度調(diào)整的核心步驟包括：選擇目標(biāo)元素、獲取基準(zhǔn)元素的高度、計算目標(biāo)元素的高度，然后將計算結(jié)果應(yīng)用到目標(biāo)元素上。

1. DOM 元素選擇

首先，我們需要通過DOM選擇器獲取到需要操作的HTML元素。通常，我們會使用 document.querySelectorAll() 來獲取具有特定類名或標(biāo)簽名的元素集合。

假設(shè)HTML結(jié)構(gòu)如下：

<div class="container">
    <div class="a">
        <!-- 外部 div 內(nèi)容 -->
        <p>這是一個外部div，它的高度將作為基準(zhǔn)。</p>
        <p style="height: 100px;"></p> <!-- 示例內(nèi)容，確保有一定高度 -->
    </div>
    <div class="a">
        <p>另一個外部div。</p>
        <p style="height: 150px;"></p>
    </div>
</div>

<div class="container">
    <div class="b">
        <!-- 內(nèi)部 div 內(nèi)容，高度將根據(jù)對應(yīng)的 .a 調(diào)整 -->
        <p>這是一個內(nèi)部div，它的高度將是對應(yīng)外部div的95%。</p>
    </div>
    <div class="b">
        <p>另一個內(nèi)部div。</p>
    </div>
</div>

注意： 原始問題中 div.a 和 div.b 是嵌套關(guān)系，但提供的代碼示例是平級關(guān)系。為了更通用和符合原始問題意圖（盡管示例代碼是平級），我們假設(shè)存在多組 a 和 b，且它們之間存在某種對應(yīng)關(guān)系（例如，按順序?qū)?yīng)）。如果它們是嵌套的，則 querySelectorAll('.a > .b') 會更直接。這里為了演示方便，我們以平級且按索引對應(yīng)的方式處理。

// 1. 獲取目標(biāo)元素
// 獲取所有 class 為 'a' 的外部 div
const outerDivs = document.querySelectorAll('.a'); 
// 獲取所有 class 為 'b' 的內(nèi)部 div
const innerDivs = document.querySelectorAll('.b');

// 確保元素數(shù)量匹配，避免索引越界
if (outerDivs.length !== innerDivs.length) {
    console.warn("警告：外部和內(nèi)部 div 數(shù)量不匹配，可能導(dǎo)致部分元素未被正確處理。");
    // 在實際應(yīng)用中，可以根據(jù)具體需求選擇拋出錯誤或調(diào)整邏輯
}

2. 遍歷與計算

獲取元素集合后，我們需要遍歷這些元素，對每一對（或每個）元素進(jìn)行高度計算和設(shè)置。

outerDivs.forEach((outerDiv, index) => {
    const innerDiv = innerDivs[index]; // 獲取與當(dāng)前 outerDiv 對應(yīng)的 innerDiv

    // 檢查對應(yīng)的 innerDiv 是否存在
    if (!innerDiv) {
        console.warn(`未找到與索引 ${index} 對應(yīng)的內(nèi)部 div，跳過當(dāng)前迭代。`);
        return; 
    }

    // 2. 獲取外部 div 的計算高度
    // getComputedStyle() 方法返回一個對象，其中包含元素所有最終使用的 CSS 屬性值。
    // 它的值是帶單位的字符串，例如 "200px"。
    const outerDivComputedStyle = window.getComputedStyle(outerDiv);
    const outerDivHeightStr = outerDivComputedStyle.height; 

    // 提取數(shù)值部分，并轉(zhuǎn)換為浮點(diǎn)數(shù)。
    // parseFloat() 會解析一個字符串，并返回一個浮點(diǎn)數(shù)。
    const outerDivHeight = parseFloat(outerDivHeightStr);

    // 檢查是否成功獲取到有效高度
    if (isNaN(outerDivHeight) || outerDivHeight <h4>style.height 與 setAttribute('height', ...) 的區(qū)別</h4><p>在原始答案中提到了兩種設(shè)置高度的方式：div.style.height 和 div.setAttribute('height', ...)。</p>

• element.style.height = '...': 這是標(biāo)準(zhǔn)的CSS DOM API，用于直接設(shè)置元素的內(nèi)聯(lián)樣式。它會改變元素的 style 屬性，例如
  。這種方式是改變元素視覺表現(xiàn)的首選方法。
• element.setAttribute('height', '...'): 這是設(shè)置HTML元素屬性的方法。height 屬性主要用于 、 或

注意事項

1. 基準(zhǔn)高度的重要性： 確保作為計算基準(zhǔn)的元素（例如 outerDiv）具有明確的高度。如果其高度為 auto 且沒有內(nèi)容撐開，getComputedStyle().height 可能會返回 0px 或其他非預(yù)期值，導(dǎo)致計算錯誤。

2. 單位處理： 在獲取高度時，getComputedStyle().height 返回的是帶單位的字符串（如 "100px"）。需要使用 parseFloat() 提取數(shù)值。在設(shè)置高度時，必須重新添加單位（如 px），否則瀏覽器可能無法正確解析。

3. 動態(tài)調(diào)整： 如果基準(zhǔn)元素的高度可能會因為窗口大小調(diào)整、內(nèi)容變化或響應(yīng)式布局而改變，那么上述代碼只會在頁面加載時執(zhí)行一次。為了確保高度始終保持同步，你需要監(jiān)聽相關(guān)事件：

   • window.addEventListener('resize', ...): 在瀏覽器窗口大小改變時重新執(zhí)行高度計算邏輯。
   • MutationObserver: 監(jiān)聽DOM樹的變化，例如基準(zhǔn)元素的內(nèi)容或樣式屬性的變化，然后觸發(fā)重新計算。
   • ResizeObserver: 專門用于監(jiān)聽元素內(nèi)容區(qū)域尺寸變化的API，比 MutationObserver 更高效和直接。

   // 封裝成函數(shù)以便在不同事件中調(diào)用
   function adjustDivHeights() {
       outerDivs.forEach((outerDiv, index) => {
           const innerDiv = innerDivs[index];
           if (!innerDiv) return;
   
           const outerDivHeight = parseFloat(window.getComputedStyle(outerDiv).height);
           if (isNaN(outerDivHeight) || outerDivHeight  {
   //     for (let entry of entries) {
   //         if (entry.target.classList.contains('a')) {
   //             // 找到對應(yīng)的 .b 元素并重新計算
   //             const index = Array.from(outerDivs).indexOf(entry.target);
   //             if (index !== -1 && innerDivs[index]) {
   //                 const outerDivHeight = entry.contentRect.height;
   //                 const targetInnerHeight = outerDivHeight * 0.95;
   //                 innerDivs[index].style.height = `${targetInnerHeight}px`;
   //             }
   //         }
   //     }
   // });
   // outerDivs.forEach(div => resizeObserver.observe(div));

4. 性能考量： 如果頁面上有大量需要這樣動態(tài)調(diào)整高度的元素，頻繁地在 resize 事件中執(zhí)行DOM查詢和樣式修改可能會影響頁面性能。在這種情況下，可以考慮使用節(jié)流（throttle）或防抖（debounce）函數(shù)來限制 adjustDivHeights 的執(zhí)行頻率。

總結(jié)

通過JavaScript，我們可以靈活地實現(xiàn)HTML元素之間復(fù)雜的、基于百分比的關(guān)聯(lián)式高度調(diào)整。核心在于準(zhǔn)確獲取基準(zhǔn)元素的計算高度，進(jìn)行數(shù)學(xué)運(yùn)算，然后將結(jié)果應(yīng)用到目標(biāo)元素的 style.height 屬性上。為了確保解決方案的健壯性和響應(yīng)性，我們還需要考慮基準(zhǔn)高度的有效性、單位的處理以及在動態(tài)環(huán)境（如窗口大小調(diào)整）下如何重新觸發(fā)計算。在某些簡單的等高布局場景中，CSS的 Flexbox 或 Grid 布局可能提供更優(yōu)雅的解決方案，但對于涉及到復(fù)雜數(shù)學(xué)計算或非直接父子關(guān)系的動態(tài)百分比調(diào)整，JavaScript仍然是不可或缺的強(qiáng)大工具。