CSS解析器/抽象？如何將樣式錶轉換爲對象

是否有一個標準或可靠的方法已經在那裏的JavaScript框架，如jQuery的解析樣式表到一個對象？CSS解析器/抽象？如何將樣式錶轉換爲對象

兩個原因，爲什麼我想知道：

我見過一對夫婦的問題，如果有人想知道如何得到這是一個選擇，而不是通過設置樣式表中的樣式屬性是什麼選擇器最終繼承。
如果Sizzle做它應該做的，這可能是一個解決方案，以確保樣式表正確地跨瀏覽器呈現。基本上jquery解析樣式表，並手動設置所有屬性（可能基於瀏覽器或已知的未實現選擇器）。這樣設計人員/開發人員只需編寫一個向前兼容的CSS3樣式表，並讓jquery/sizzle完成瀏覽器獲得的工作「T。

我看到的唯一缺點是，這仍然不會實現CSS3屬性，但它是一個開始。

2010-02-09 Anthony

在客戶端，一個樣式表已經是一個對象;當頁面加載時它會被解析成一棵樹。

比方說，您有從

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <link href="/styles/global.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/styles/banner.css" rel="stylesheet" type="text/css" media="screen"/>

和global.css HTML頁面包含線

#page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; } 
#header { background-color: transparent; } 
#main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;} 
#sidebar { margin-right: 12px; }

然後，爲了找到什麼設置的#pagebackground-color，你需要寫document.styleSheets[0].cssRules[0].style.backgroundColor，這將返回#fff（或在某些瀏覽器rgb(255, 255, 255)，我認爲）。

其他有用的東西，假設上述表：

document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }" 
document.styleSheets[0].cssRules[2].selectorText //"#main"

如果你有一個更復雜的選擇，像#main div.header a, #main div.header a:visited，然後選擇文本屬性返回整個事情，而不僅僅是第一位。

您的具體問題是「如何查找給定選擇器的樣式表中設置的內容」。下面是近似的一種方式：

function findProperty(selector) { 
    rules = document.styleSheets[0].cssRules 
    for(i in rules) { 
     if(rules[i].selectorText==selector) return rules[i].cssText; 
    } 
    return false; 
} 

findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }"

的事情是，你必須用這種方式獲得了CSS樹已經被瀏覽器解析（因此「近似」以上）。如果你使用的是Firefox，你將不會看到任何-webkit樣式，因爲Mozilla只會刪除它們。各種瀏覽器也傾向於有自己的顯示顏色的方式（如上所述;如果實際的.css文件的顏色設置爲#fff，並且在解析後在JavaScript中檢查它，則可能返回#fff,#ffffff或rgb(255, 255, 255)）。

以上將告訴您您的瀏覽器將CSS表格視爲什麼;如果您想知道初始.css文件中包含哪些特定的ascii字符，唯一可靠的方法是查看文件本身AFAIK。

樣式表對象的引用可用here。

來源

2010-03-07 03:53:42 Inaimathi

有趣的問題。在Daniel Wachsstock的網站上有一個jQuery解析器。 http://bililite.com/blog/2009/01/16/jquery-css-parser/

不幸的是，它可能不是你正在尋找的...但它值得一試。下面的說明是從他的網站採取：

在jQuery中調用$(selector).parsecss(callback)

它會掃描$（選擇），或者其後代都和元素，解析每一個和傳遞一個對象（詳情如下）回調功能。

例如創建一個CSS文件：

.gallery a { 
    -jquery-lightbox: {overlayBgColor: '#ddd'} 
}

，你會得到

$('.gallery a').lightbox({overlayBgColor: '#ddd'});

來源

2010-02-10 16:19:25 mre

CSS解析器/抽象？如何將樣式錶轉換爲對象

回答

相關問題