如何將整個 CSS 規則內容提取為字串？

如何提取CSS 規則值

如何傳回包含CSS 規則所有內容的字串，就像您的格式一樣d 以內聯樣式查看？這可以在不知道規則的具體內容的情況下完成，避免需要透過樣式名稱提取它們。

考慮以下CSS：

.test {
    width:80px;
    height:50px;
    background-color:#808080;
}

首先，我們有以下內容代碼：

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
            //this is where I can collect the style information, but how?
        }
    }
}
getStyle('.test')

基於scunliffe 的答案並改編自其他來源，我們可以增強此程式碼以擷取CSS 規則value:

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;
}

alert(getStyle('.test'));

此程式碼遍歷CSS規則，檢查選擇器文字是否與指定的類別名稱相符。對於每個匹配規則，它會收集相應的 CSS 文字並將其累積到 cssText 變數中。最後，函數傳回累積的 CSS 文本，提供具有所需內聯樣式格式的字串。

以上是如何將整個 CSS 規則內容提取為字串？的詳細內容。更多資訊請關注PHP中文網其他相關文章！