如何通過樣式表中定義的Javascript讀出CSS文本？

我正在考慮使用Javascript來自動轉換像border-radius,transform,box-shadow等CSS3屬性到他們的瀏覽器特定對應。如何通過樣式表中定義的Javascript讀出CSS文本？

我做了一些研究，發現你可以迭代通過document.styleSheets定義的樣式表。您可以通過document.styleSheets[0].cssRules[0].cssText找到CSS規則。

我想修改包含CSS3通過與相應的供應商前綴注入瀏覽器的特定屬性，如-webkit-border-radius，moz-border-radius屬性的CSS規則等

然而，似乎cssText屬性在預處理每個瀏覽器都會過濾掉它不理解的CSS屬性。這實際上打破了這個想法。

問題：有沒有什麼方法可以完全按照樣式表中的定義檢索CSS文本？或者：是否有另一種方法來通過Javascript完成此操作？我想保持乾淨的CSS文件，而不需要爲每個特定的瀏覽器多次定義每個屬性。

來源

2010-06-13 Monokai

這是一項艱鉅的任務之間的語法差異的細節你的大腦！你會處理很多東西！ – Sarfraz 2010-06-13 06:58:22

它看起來像是:) – Monokai 2010-06-15 12:49:22

爲什麼不創建樣式表，其中每個瀏覽器都有獨特的CSS3前置對話框？正如您所提到的，每個瀏覽器都會過濾掉他們無法識別的屬性。不要緊，如果你有-webkit-border-radius和moz-border-radius和border-radius都同一個css選擇器同時定義。如果瀏覽器識別出其中的一個，它就會被使用，如果沒有，它會被丟棄。即使瀏覽器識別出多個版本，它們很可能也會具有相同的值，所以它無關緊要。

來源

2010-06-13 07:06:05 jrista

+1：這是一個好點 – Sarfraz 2010-06-13 07:11:06

謝謝，這就是我現在正在做的。我猜這仍然是唯一的方式 - 但它是如此醜陋:) – Monokai 2010-06-15 12:37:14

是的，它往往是醜陋的......沒有人說CSS腳本本身很漂亮。 ;）它通過大量的複雜性和hax讓你的UI變得非常漂亮。 – jrista 2010-06-16 03:55:21

看起來你已經完成了對這個井的研究。通過訪問CSSStyleDeclaration或CSSRuleList對象是不可能的，因爲未識別的屬性會被濾除，這是大多數主流瀏覽器中的一個實現錯誤，因爲它們應該列出所有屬性 - 即使它們不理解。有關詳情，請參閱related question。

其餘的替代方法與@Sarfaraz已經提到的一樣需要太多的工作。這一切都歸結爲手工解析所有內容，並重新執行瀏覽器爲我們完成的工作。假設你的樣式聲明是內聯的，或者在<style>標籤中，或者作爲元素的樣式屬性，那麼你將不得不分析文本並構建一個所有有趣的CSS3屬性的地圖。隨着直列屬性，它基本上解析文本有點類似：

`prop1: value; prop2: value2; ..`

見@Nick Craver的回答類似question，他已經掛了這樣一個正則表達式的方法。

隨着聯標籤，文本解析會的形式爲：

[selector] { 
    prop1: value1; 
    prop2: value2; 
    ... 
} 

...

這是一個過於簡單化忽略所有的語法產生式規則，並且有問題的負荷在這裏處理。

如果樣式表外，並在頁面內引用，那麼你就必須查找具有屬性rel等於"stylesheet"的<link>元素，並得到他們的href財產。另外，解析導入的樣式表的url。一旦你有這些url，你可以進行AJAX調用來獲取這些樣式表的實際內容，假設沒有阻塞服務器端的調用。一旦你從每個文件中獲得文本，它基本上是一個與上面相同的解析步驟，並根據瀏覽器使用insertRule或addRule添加必要的規則。

可能有開源的CSS解析器，可以幫助你做到這一點。

這可能是說，我覺得@ jrista的解決方案是一個相當不錯的很長的路要走。如果您不想編寫供應商特定代碼的所有排列，那麼更簡單和更好的方法是創建一個CSS生成層，這是生成所有排列並吐出CSS文件的生成過程的一部分。

該層還可以通過檢查User-Agent頭包含優化和僅產生所需的樣式，這是GWT確實基本上什麼（但它預先生成的，而不是在運行時做這一切可能的排列）。

這可能是一件嚴肅的事，所以在這一天結束時，你必須評估你的選擇，看看是否達到碼純度勝過有一個小的冗餘帶來的好處的努力。

來源

2010-06-13 08:34:42 Anurag

謝謝。我喜歡手動解析樣式表的想法。這實際上是一種完成我想要的智能方式。但是製作自定義分析器的開銷會有點矯枉過正。另外，如果您加載CSS文件兩次，我不知道瀏覽器的行爲如何。希望它會被緩存。我想我會試試看。如果這不起作用，那麼在構建過程中修改CSS也是一個不錯的解決方案。 – Monokai 2010-06-15 12:45:53

是不是有什麼IE7.js（和IE8.js and IE9.js）已經這樣做了？也許你應該看看Dean Edwards採用的方法來增加對最小高度，不透明度，許多CSS3選擇器的支持，position：fixed;和溢出：可見;對這些我們都討厭的舊瀏覽器。

編輯：順便說一句，我更喜歡jrista解決方案：-moz和-webkit和-ms前綴CSS3屬性並在需要時-o。
這是一項令人討厭的任務，我們需要做大約5年的時間，但是如果W3C改變了對某些屬性的看法（CSS3模塊遠不是推薦標準），那麼它的使用會非常麻煩。然後您的腳本仍然會識別舊的語法，並將其提供給瀏覽器，告訴他們之間的區別-vendor-property: oldsyntax_from_2010;和property: newsyntax_from_2015;
如果您發現-moz-border-radius: 4px; border-radius: 20px;，您會做什麼？哪一個是好的？

EDIT2：http://css3generator.com/是一個方便的工具，如果你不想用的東西像-webkit-border-bottom-right-radius和-moz-border-radius-bottomright :)

來源

2010-06-13 16:49:44 FelipeAls

我不同意我們必須做5年。 Chrome已經支持spec'd屬性，例如 - 'border-radius'。其他瀏覽器廠商也非常重視CSS3。 – Anurag 2010-06-13 19:20:31

謝謝。我會看看這個劇本，看看我能否從中獲得一些想法。我害怕CSS3Generator不是一個很好的解決方案，因爲它只是一種複製粘貼的東西。 – Monokai 2010-06-15 12:48:18

如何通過樣式表中定義的Javascript讀出CSS文本？

回答

相關問題