在樣式表中插入多個 CSS 規則

Question

好的，所以我需要向樣式表添加規則，但它也需要跨瀏覽器，所以我需要多個規則。

現在我可以用一條單行線得到一個工作（Chrome）。

但是，我找不到任何文檔或與多行相關的任何內容。

這個想法是使用瀏覽器前綴添加多個 css 動畫，只是為了增加樂趣。

這就是我想要做的（我在 Chrome 中調試）：

styleSheet.insertRule("@-webkit-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);
styleSheet.insertRule("@-moz-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);
styleSheet.insertRule("@-ms-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);
styleSheet.insertRule("@keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);

然后在此之后我需要為每個動畫添加瀏覽器前綴：

document.getElementById('starsColoured').style.webkitAnimationName = "userScore";
document.getElementById('starsColoured').style.mozanimationName = "userScore";
document.getElementById('starsColoured').style.MSAnimationName = "userScore";
document.getElementById('starsColoured').style.animationName = "userScore";

而且它不起作用，我並不感到驚訝，我只是不知道添加多個的實際方法。 特別是當我嘗試將前綴動畫名稱添加到元素時。

我試圖將所有規則放在一行中，如下所示：

styleSheet.insertRule("@-webkit-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} } @-moz-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} } @-ms-keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} } @keyframes userScore { 0% { width: 0px; } 100% {width: " + (monkeyScore * 20) + "px;} }", styleSheet.cssRules.length);

再次沒有運氣，這給了我以下錯誤：

Uncaught SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '@-webkit-keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} } @-moz-keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} } @-ms-keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} } @keyframes userScore { 0% { width: 0px; } 100% {width: 380px;} }'.

如果我將它們作為單獨的規則嘗試，我會收到以下錯誤： Uncaught SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '@-moz-keyframes userScore { 0% { width: 0px; } 100% {寬度：380px;} }'。

我在 FireFox 中嘗試，我收到以下錯誤，與第一個 insertRule 行（Chromes）有關：

SyntaxError: An invalid or illegal string was specified

就是這樣。

任何幫助將非常感激！

如果我能提供幫助，我會盡量避免使用 jQuery。

而且我確信多行的任何文檔也會對我和其他人有所幫助。

提前致謝

Answer 1

您可以插入帶有數據 URI 的新樣式表鏈接。 假設您的 CSS 規則位於變量css中，則：

head = document.getElementsByTagName('head')[0];
stylesheet = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'data:text/css,' + escape(css);  // IE needs this escaped
head.appendChild(link);

這至少在最新的 Chrome、Firefox 和 IE 中有效。

或者，您可以使用insertRule添加規則，並將每個添加內容簡單地包裝在try塊中，以便忽略前綴規則引發的錯誤。

Answer 2

只修改<style>標簽怎么樣？

<style id="custom-styles"></style>

<script>
  var red = '#f00';
  document.getElementById('custom-styles').innerHTML = 'body { color: ' + red + '; }';
</script>

這是一個小演示：http: //jsbin.com/mamekame/2/edit ?html,js,output

Answer 3

由於樣式元素中的空間而出現問題

@keyframes 用戶評分

嘗試如下@keyframes_userScore

Answer 4

解析失敗，因為樣式名稱中有“@”字符。 嘗試從'@'中刪除'@'或用'_'替換它，它會起作用。