首頁 > web前端 > css教學 > 如何準確檢索調整HTML中的字體大小?

如何準確檢索調整HTML中的字體大小?

Mary-Kate Olsen
發布: 2024-12-15 10:14:13
原創
382 人瀏覽過

How Can I Accurately Retrieve and Adjust Font Size in HTML?

檢索 HTML 中的字體大小

取得 HTML 元素的字體大小似乎是一項簡單的任務。然而,簡單地存取 style.fontSize 屬性可能並不總是產生所需的結果,特別是如果字體大小是在外部樣式表中定義的。

要取得精確的字體大小值,請使用 window.getCompulatedStyle()方法。此函數計算元素的有效樣式,包括從其祖先繼承的任何樣式。以下是範例:

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);
登入後複製

此程式碼取得 ID 為「foo」的元素的計算字體大小,並將其儲存在 fontSize 變數中。現在您可以存取實際的字體大小值。

使用此方法,您可以實現動態字體大小調整。例如:

el.style.fontSize = (fontSize + 1) + 'px';
登入後複製

這行程式碼將「foo」元素的字體大小增加一級。您可以將“1”替換為任何所需的值,以根據需要更改字體大小。

以上是如何準確檢索調整HTML中的字體大小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板