在前端开发中，有时候需要获取 HTML 元素的字体大小。本文将介绍几种方法来获取字体大小。
方法一：使用 window.getComputedStyle()
window.getComputedStyle() 方法可以获取元素的实际样式值，包括字体大小。以下是示例代码：
-- ------------------- ----------
----- -------------- - ----------------------------------- ----- ------------- - ---------------------------------------- ----- -------- - -------------------------------------------- ----------------------
上述代码会输出 16px，即 <p> 元素的字体大小为 16 像素。
方法二：使用 HTMLElement.style 属性
另一种获取字体大小的方法是使用 HTMLElement.style 属性。该属性返回一个对象，用于设置或获取样式属性的值。以下是示例代码：
-- ------------ ----------------- ------------- ----------
----- -------------- - ----------------------------------- ----- -------- - ------------------------------ ----------------------
上述代码会输出 20px，即 <p> 元素的字体大小为 20 像素。
需要注意的是，如果样式是通过外部样式表或内部样式表设置的，则无法通过 HTMLElement.style 属性获取到。
方法三：使用 CSSStyleSheet 对象
最后一种获取字体大小的方法是使用 CSSStyleSheet 对象。该对象表示一个外部样式表或内部样式表，并提供了许多方法来获取样式信息。以下是示例代码：
----- ---------------- ------------------ -- ------------------- ----------
-------- - ---------- ----- -
----- ---------- - ------------------------ ----- ---- - ----------------------- ----- -------- - -------------------- ----------------------
上述代码会输出 24px，即 <p> 元素的字体大小为 24 像素。
需要注意的是，CSSStyleSheet 对象只能访问通过外部样式表或内部样式表设置的样式，无法访问通过行内样式或 JavaScript 动态设置的样式。
结论
本文介绍了三种获取 HTML 元素字体大小的方法：使用 window.getComputedStyle()、HTMLElement.style 属性和 CSSStyleSheet 对象。这些方法提供了灵活的方式来获取元素的样式信息，并可以根据具体情况选择使用哪种方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27918