如何在 HTML 中获取字体大小

在前端开发中，有时候需要获取 HTML 元素的字体大小。本文将介绍几种方法来获取字体大小。

方法一：使用 window.getComputedStyle()

window.getComputedStyle() 方法可以获取元素的实际样式值，包括字体大小。以下是示例代码：

<p id="example">Hello, world!</p>

const exampleElement = document.getElementById('example');
const computedStyle = window.getComputedStyle(exampleElement);
const fontSize = computedStyle.getPropertyValue('font-size');
console.log(fontSize);

上述代码会输出 16px，即 <p> 元素的字体大小为 16 像素。

方法二：使用 HTMLElement.style 属性

另一种获取字体大小的方法是使用 HTMLElement.style 属性。该属性返回一个对象，用于设置或获取样式属性的值。以下是示例代码：

<p id="example" style="font-size: 20px;">Hello, world!</p>

const exampleElement = document.getElementById('example');
const fontSize = exampleElement.style.fontSize;
console.log(fontSize);

上述代码会输出 20px，即 <p> 元素的字体大小为 20 像素。

需要注意的是，如果样式是通过外部样式表或内部样式表设置的，则无法通过 HTMLElement.style 属性获取到。

方法三：使用 CSSStyleSheet 对象

最后一种获取字体大小的方法是使用 CSSStyleSheet 对象。该对象表示一个外部样式表或内部样式表，并提供了许多方法来获取样式信息。以下是示例代码：

<link rel="stylesheet" href="styles.css">

<p id="example">Hello, world!</p>

#example {
  font-size: 24px;
}

const styleSheet = document.styleSheets[0];
const rule = styleSheet.cssRules[0];
const fontSize = rule.style.fontSize;
console.log(fontSize);

上述代码会输出 24px，即 <p> 元素的字体大小为 24 像素。

需要注意的是，CSSStyleSheet 对象只能访问通过外部样式表或内部样式表设置的样式，无法访问通过行内样式或 JavaScript 动态设置的样式。

结论

本文介绍了三种获取 HTML 元素字体大小的方法：使用 window.getComputedStyle()、HTMLElement.style 属性和 CSSStyleSheet 对象。这些方法提供了灵活的方式来获取元素的样式信息，并可以根据具体情况选择使用哪种方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27918