JavaScript 取得父元素屬性：parentNode 後直接用 offsetWidth/offsetHeight 或 getComputedStyle

透過 `element.parentNode` 取得父元素後，想讀取其寬高。直接用 `obj.width`/`obj.height` 只能讀到內聯 `style="width:...;height:..."` 或 `` 的屬性值，**無法取得 CSS 渲染後的實際尺寸**。正確做法視需求分為三種。

三種取寬高方式對照

實戰代碼

var imgDiv = document.getElementById('divID');
var parent = imgDiv.parentNode;  // 父元素

// 1. 取得渲染後實際像素寬高（最常用）
var w = parent.offsetWidth;
var h = parent.offsetHeight;
console.log('實際佔據尺寸:', w, 'x', h);

// 2. 取得 CSS 設定值（可能是 %、auto、rem）
var style = window.getComputedStyle(parent);
var cssW = style.width;   // "300px" / "50%" / "auto"
var cssH = style.height;
console.log('CSS 設定值:', cssW, cssH);

// 3. 若父元素是 、、

常見誤區

• ❌ `parent.width` / `parent.height` → 僅對 ``、``、`` 等極少數元素有效，且讀的是 HTML 屬性而非 CSS 渲染值
  ❌ `parent.style.width` → 僅讀取內聯 style 屬性，無法讀取類別/外部樣式表定義的值
  ✅ 統一使用 `offsetWidth/Height` 取實際像素，`getComputedStyle` 取 CSS 邏輯值

  完整封裝函式

  function getElementSize(el) {
      if (!el || el.nodeType !== 1) return { width: 0, height: 0 };
      var style = window.getComputedStyle(el);
      return {
          // 實際像素（含 border+padding）
          offsetWidth: el.offsetWidth,
          offsetHeight: el.offsetHeight,
          // 內容區像素（不含 border）
          clientWidth: el.clientWidth,
          clientHeight: el.clientHeight,
          // CSS 邏輯值
          cssWidth: style.width,
          cssHeight: style.height,
          // 數值化（若為 auto/% 回傳 NaN）
          computedWidth: parseFloat(style.width),
          computedHeight: parseFloat(style.height)
      };
  }
  
  // 使用
  var size = getElementSize(document.getElementById('divID').parentNode);
  console.log(size.offsetWidth, size.offsetHeight);

  記住：`parentNode` 拿到的是真實 DOM 元素，**永遠用 `offsetWidth/Height` 取實際像素尺寸**，用 `getComputedStyle` 取 CSS 邏輯值，不要用 `.width`/`.height`。

  1. 上一篇文章： JavaScript Image.onload 不觸發：EventUtil.addHandler 缺少實際綁定邏輯
  2. 下一篇文章： VC++ 6.0 誤用 C# MessageBox 代碼導致編譯錯誤：正確寫法對照
  程式設計疑難解答

  JavaScript 定時器寫法不規範導致重複執行問題

  問題現象 開發者將 setInterval 定時器放置於 c

  C 語言字符串編碼轉換：打亂重組替換實現簡易加密/解碼邏輯

  題目需求推測 根據最佳回答，第四問要求：將字符串打亂（如打亂

  Eclipse 運行 Android 專案：模擬器未啟動或 minSdkVersion 不符

  現象：啟動模擬器後再 Run，彈出新建配置對話框，模擬器顯示

  C++ 類定義與實現分離：因拼寫錯誤導致的鏈接失敗案例分析

  C++ 類定義與實現分離：因拼寫錯誤導致的鏈接失敗案例分析
  Android Studio 專案路徑含中文導致編譯錯誤的解決方案 JavaScript 陣列去重並保持原始型別 SQL Server 學生表新增身份證號列並批量更新數據 Android Eclipse 佈局不顯示？match_parent 擠佔空間是元兇 JUnit ClassNotFoundError 快速排查：重新編譯、依賴範圍、運行配置三步走 Spring MVC 接收多組 CheckBox 資料的最佳實踐 C 語言四位數加密：每位加 5 取模 10 後首尾對調

  欄目導航

  組合語言

  Delphi

  Groovy

  WebSphere

  Rational

  Python 程式設計

  Ruby 程式設計

  程式設計疑難解答

  程式設計綜合問答

  更多程式設計知識

  程式設計問題解答
  Copyright © 程式碼之家 All Rights Reserved