當 CSS 定義不存在時，如何在 JavaScript 中存取渲染的字體資訊？

在沒有CSS 定義的情況下訪問渲染字體

在檢查HTML 元素的屬性時，很明顯重要資訊使用JavaScript 的object .style 屬性時，像font-face 和font-size 一樣遺失。這是因為元素的樣式是從網頁的 CSS 繼承的，並且在明確定義這些屬性之前，object.style 屬性保持為空。

但是，仍然可以使用以下方式檢索實際渲染的字體資訊getCompatedStyle 方法。這是一個完成此操作的 JavaScript 函數：

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

要使用此函數，只需傳入您要檢查的元素和要檢索的屬性，例如「font-size」。例如：

css(object, 'font-size'); // Returns '16px' or similar

要注意的是，Internet Explorer 8 不支援此方法。

現場示範：

點擊此處在JSFiddle 上觀看現場示範：http://jsfiddle.net/4mxzE/

程式碼片段：

// Retrieve the computed style information
console.log(
  getComputedStyle(document.getElementById('test'), null)
    .getPropertyValue('font')
);

// Define a custom CSS style for the element
document.getElementById('test').style.cssText = 'font-family: fantasy, cursive;';

// Append an HTML element to the document
document.body.appendChild(document.getElementById('test'));

#test {
  /* Custom font-face applied */
}

<!-- Element with rendered font -->
<div>

以上是當 CSS 定義不存在時，如何在 JavaScript 中存取渲染的字體資訊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！