首頁 > web前端 > js教程 > 如何提取 CSS 規則值並將其作為內聯樣式傳回?

如何提取 CSS 規則值並將其作為內聯樣式傳回?

Linda Hamilton
發布: 2024-12-11 01:01:09
原創
124 人瀏覽過

How Can I Extract CSS Rule Values and Return Them as Inline Styles?

提取 CSS 規則值

要提取 CSS 規則的值並以內聯樣式格式傳回它們,需要一種通用方法。這涉及遍歷所有 CSS 規則並根據其選擇器識別目標規則。

考慮以下CSS:

.test {
    width: 80px,
    height: 50px,
    background-color: #808080;
}
登入後複製

下面的程式碼片段示範如何擷取「. test」規則:

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

var rules = getStyle('.test');
登入後複製

變數cssText 現在將包含一個字串,其中包含“.test”規則的CSS 值,就好像它們一樣以內聯樣式聲明。這種方法用途廣泛,可用於任何 CSS 規則,無論其內容為何。

以上是如何提取 CSS 規則值並將其作為內聯樣式傳回?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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