寫一個獲取非行間樣式的方法

王铁柱6發表於2024-12-06

獲取非行間樣式，也就是計算樣式，可以使用 JavaScript 的 window.getComputedStyle() 方法。 這個方法返回一個包含元素所有計算樣式的 CSSStyleDeclaration 物件。

以下是一個示例函式，它接受一個元素和一個 CSS 屬性名作為引數，並返回該元素的計算樣式值：

function getComputedStyleValue(element, propertyName) {
  if (!element || !propertyName) {
    return undefined; // 處理無效輸入
  }

  const computedStyles = window.getComputedStyle(element);
  return computedStyles.getPropertyValue(propertyName);
}


// 示例用法：
const myElement = document.getElementById('myElement'); // 獲取元素
const backgroundColor = getComputedStyleValue(myElement, 'background-color'); // 獲取背景顏色
const fontSize = getComputedStyleValue(myElement, 'font-size'); // 獲取字型大小

console.log("Background Color:", backgroundColor);
console.log("Font Size:", fontSize);


// 處理偽元素樣式 (::before, ::after)
function getPseudoElementStyleValue(element, pseudoElementSelector, propertyName) {
  if (!element || !pseudoElementSelector || !propertyName) {
    return undefined;
  }
  const computedStyles = window.getComputedStyle(element, pseudoElementSelector);
  return computedStyles.getPropertyValue(propertyName);
}

const contentBefore = getPseudoElementStyleValue(myElement, '::before', 'content');
console.log("Content of ::before:", contentBefore);


//  更簡潔的寫法 (如果確定元素存在)
const element = document.querySelector('#myElement');
const computedBackgroundColor = getComputedStyle(element).backgroundColor;
const computedFontSize = getComputedStyle(element).fontSize; // 或  getComputedStyle(element).getPropertyValue('font-size');

console.log("Background Color (shorter version):", computedBackgroundColor);
console.log("Font Size (shorter version):", computedFontSize);

關鍵點:

  • window.getComputedStyle(element, pseudoElt): 這是核心方法。 element 是你想要獲取樣式的元素。 pseudoElt 是可選引數，用於獲取偽元素（例如 ::before，::after）的樣式。 如果不指定，則獲取元素本身的樣式。
  • getPropertyValue(propertyName): 這個方法用於獲取特定 CSS 屬性的值。 propertyName 應該是 CSS 屬性名的小寫形式（例如 'background-color'，'font-size'，而不是 'backgroundColor' 或 'fontSize'）。 它返回一個字串值。
  • 返回值: 函式返回一個字串，表示計算樣式的值。 例如，rgb(255, 0, 0) 或 16px。
  • 錯誤處理: 上面的程式碼包含了簡單的錯誤處理，以防止在傳入無效引數時出現錯誤。
  • 單位: 返回值包含單位 (例如 'px', 'em', 'rem', '%')。 如果需要數值進行計算，需要解析字串並提取數值。

這個改進的版本更簡潔，包含了錯誤處理，並演示瞭如何獲取偽元素的樣式。 記住，getComputedStyle 獲取的是最終應用到元素上的樣式，包括來自樣式表、繼承和預設樣式。

相關文章