」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 在JavaScript中如何獲取實際渲染的字體,當CSS字體屬性未定義時?

在JavaScript中如何獲取實際渲染的字體,當CSS字體屬性未定義時?

發佈於2025-04-30
瀏覽:675

How Can I Get the Actual Rendered Font in JavaScript When CSS Font Properties Are Undefined?

Accessing Actual Rendered Font when Undefined in CSS

When accessing the font properties of an element, the JavaScript object.style.fontFamily and object.style.fontSize may return empty values if the corresponding CSS properties are not explicitly set.但是,這並不意味著沒有字體就呈現元素。瀏覽器通常應用默認或繼承的樣式,該樣式定義了實際渲染字體。

檢索渲染的字體信息,您可以使用getCompentededStyle方法:

For instance:
function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}
css(object, 'font-size') // returns '16px'

This method returns the computed value of the specified property, even if it was not explicitly set in the CSS.
function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

Note:

getComputedStyle is not IE8。

live demo: [https://jsfiddle.net/4mxze/](https://jsfiddle.net/4mxze/)

最新教學 更多>
  • 如何在鼠標單擊時編程選擇DIV中的所有文本?
    如何在鼠標單擊時編程選擇DIV中的所有文本?
    在鼠標上選擇div文本單擊帶有文本內容,用戶如何使用單個鼠標單擊單擊div中的整個文本?這允許用戶輕鬆拖放所選的文本或直接複製它。 在單個鼠標上單擊的div元素中選擇文本,您可以使用以下Javascript函數: function selecttext(canduterid){ if(d...
    程式設計 發佈於2025-04-30
  • 在PHP中如何高效檢測空數組?
    在PHP中如何高效檢測空數組?
    在PHP 中檢查一個空數組可以通過各種方法在PHP中確定一個空數組。如果需要驗證任何數組元素的存在,則PHP的鬆散鍵入允許對數組本身進行直接評估:一種更嚴格的方法涉及使用count()函數: if(count(count($ playerList)=== 0){ //列表為空。 } 對...
    程式設計 發佈於2025-04-30
  • 如何將多種用戶類型(學生,老師和管理員)重定向到Firebase應用中的各自活動?
    如何將多種用戶類型(學生,老師和管理員)重定向到Firebase應用中的各自活動?
    Red: How to Redirect Multiple User Types to Respective ActivitiesUnderstanding the ProblemIn a Firebase-based voting app with three distinct user type...
    程式設計 發佈於2025-04-30
  • 如何限制動態大小的父元素中元素的滾動範圍?
    如何限制動態大小的父元素中元素的滾動範圍?
    在交互式接口中實現垂直滾動元素的CSS高度限制,控制元素的滾動行為對於確保用戶體驗和可訪問性是必不可少的。一種這樣的方案涉及限制動態大小的父元素中元素的滾動範圍。 問題:考慮一個佈局,其中我們具有與用戶垂直滾動一起移動的可滾動地圖div,同時與固定的固定sidebar保持一致。但是,地圖的滾動無限...
    程式設計 發佈於2025-04-30
  • 在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在JTable中維護jtable單元格渲染後,在JTable中,在JTable中實現自定義單元格渲染和編輯功能可以增強用戶體驗。但是,至關重要的是要確保即使在編輯操作後也保留所需的格式。 在設置用於格式化“價格”列的“價格”列,用戶遇到的數字格式丟失的“價格”列的“價格”之後,問題在設置自定義單元...
    程式設計 發佈於2025-04-30
  • JavaScript中如何動態訪問全局變量?
    JavaScript中如何動態訪問全局變量?
    在JavaScript 一種方法是使用窗口對象存儲和檢索變量。通過引用全局範圍,可以使用其名稱動態訪問變量。 //一個腳本 var somevarname_10 = 20; //另一個腳本 window.all_vars = {}; window.all_vars ['somevarna...
    程式設計 發佈於2025-04-30
  • 如何解決AppEngine中“無法猜測文件類型,使用application/octet-stream...”錯誤?
    如何解決AppEngine中“無法猜測文件類型,使用application/octet-stream...”錯誤?
    appEngine靜態文件mime type override ,靜態文件處理程序有時可以覆蓋正確的mime類型,在錯誤消息中導致錯誤消息:“無法猜測mimeType for for file for file for [File]。 application/application/octet...
    程式設計 發佈於2025-04-30
  • Excel UDFs能否修改其他單元格?
    Excel UDFs能否修改其他單元格?
    excel udf:克服數組輸出中的限制 與普遍的信念相反,可以通過複雜的解決方法來完成這項任務。通過利用Windows計時器和應用程序的組合。對時間計時器,我們可以繞過這些限制。 windows Timer是從UDF內部啟動的。但是,其函數僅限於安排應用程序。一次時計時器。 applica...
    程式設計 發佈於2025-04-30
  • 用CSS和emoji打造奇趣主題切換
    用CSS和emoji打造奇趣主題切換
    [2 您可以在此處進行檢查:https://fictoan.io/ 全是CSS和兩行JS,僅用於旋轉觸發器。我想進入更大的場景,但想立即分享! 您可以在這裡發現所有微觀詳細信息嗎? 完整代碼: https://github.com/fictoan/fictoan-docs/tree/main/s...
    程式設計 發佈於2025-04-30
  • 猴子補丁能否解決Go不可變代碼庫的測試難題?
    猴子補丁能否解決Go不可變代碼庫的測試難題?
    在GO中進行補丁:一個不變的代碼bases 面對類似的情況,建議的方法涉及創建自定義界面作為圍繞無法解碼的代碼的包裝器創建一個自定義界面。這使您可以在完整的原始代碼完整時模擬測試中的特定方法。 int,錯誤) } 鍵入混凝土結構{ 客戶 *somepackage.client } func...
    程式設計 發佈於2025-04-30
  • 為什麼使用Firefox後退按鈕時JavaScript執行停止?
    為什麼使用Firefox後退按鈕時JavaScript執行停止?
    導航歷史記錄問題:JavaScript使用Firefox Back Back 此行為是由瀏覽器緩存JavaScript資源引起的。要解決此問題並確保在後續頁面訪問中執行腳本,Firefox用戶應設置一個空功能。 警報'); }; alert('inline Alert')...
    程式設計 發佈於2025-04-30
  • 表單刷新後如何防止重複提交?
    表單刷新後如何防止重複提交?
    在Web開發中預防重複提交 在表格提交後刷新頁面時,遇到重複提交的問題是常見的。要解決這個問題,請考慮以下方法: 想像一下具有這樣的代碼段,看起來像這樣的代碼段:)){ //數據庫操作... 迴聲“操作完成”; 死(); } ? > ...
    程式設計 發佈於2025-04-30
  • C++語法到底是上下文無關還是上下文相關,還是更強大的東西?
    C++語法到底是上下文無關還是上下文相關,還是更強大的東西?
    揭示了C的語法:上下文複雜性此外,C模板實例化本身是Turing-complete,可以在解析過程中進行計算。這使得c不合上下文和上下文敏感的分類。 在理論上可能是無上下文或上下文敏感的語法,而其難以理解的複雜性使其不切實際。 C標準中對技術英語和算法描述的依賴反映了這種句法不確定性的識別。 而不...
    程式設計 發佈於2025-04-30
  • 您可以使用CSS在Chrome和Firefox中染色控制台輸出嗎?
    您可以使用CSS在Chrome和Firefox中染色控制台輸出嗎?
    在javascript console 中顯示顏色是可以使用chrome的控制台顯示彩色文本,例如紅色的redors,for for for for錯誤消息? 回答是的,可以使用CSS將顏色添加到Chrome和Firefox中的控制台顯示的消息(版本31或更高版本)中。要實現這一目標,請使用以下...
    程式設計 發佈於2025-04-30
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call fil...
    程式設計 發佈於2025-04-30

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3