用javascript正確處理cssRules

我正在使用Javascript處理CSS規則，在每個resize事件上創建一個可能已經在CSS中定義的類或之前的Javascript resize事件，這會導致在調整大小事件後有太多CSS規則。如何更改我的代碼，以便刪除原有的CSS規則或對其進行修改。用javascript正確處理cssRules

這是我在StackOverflow上找到的代碼。

var setStyleRule = function(selector, rule) { 
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)]; 
    if(stylesheet.addRule) { 
     stylesheet.addRule(selector, rule) 
    } else if(stylesheet.insertRule) { 
     stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); 
    } 
};

來源

2014-03-03 ɢʜʘʂʈ ʀɛɔʘɴ

是什麼你正試圖解決的問題到底是什麼？動態修改樣式表是一件非常神祕的事情，可能會有更好的解決方案。你能向我們展示你正試圖創造的那種規則嗎？ – 2014-09-09 17:55:27

@torazaburo我同意，這是六個月前，我試圖有一個解決方案就像從頭開始發明輪子。但很久以前就解決了，下面的答案正是我所做的。 –

一個空的風格標籤添加到您的網頁與一些ID喜歡 -

<style id="customstyles" type="text/css"></style>

然後在resize事件handler-

var sheets = document.styleSheets; 
for (var i = 0; i < sheets.length; i++) { 
    var sheet = sheets[i]; 
    if (sheet.ownerNode.id == "customstyles") { 
     var rules = sheet.cssRules; 
     if (rules.length > 0) { 
      // instead of addRule, modify the existing rule with following code- 
      var style = "css attribute on which you are applying new value"; 
      var stylevalue = "the value to be applied"; 
      for (var j = 0; j < rules.length; j++) { 
       var rule = rules[j]; 
       if (rule.selectorText == selector) { 
        rule.style.setProperty(style, stylevalue); 
        break; 
       } 
      } 
     } 
     else { 
      // call you code to insert new cssRule 
      stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length); 
     } 
     break; 
    } 
}

希望幫助

來源

2014-09-09 15:10:06

我在幾個月前解決了你的建議，希望它能幫助別人。 –

@ɢʜʘʂʈʀɛɔʘɴyep ..我知道我是一個遲到..我與一個類似的問題鬥爭..意思，雖然我發現這個問題沒有回答..可能是你可以幫助我與這一個.. http://stackoverflow.com /問題/ 25747437 / –

用javascript正確處理cssRules

回答

相關問題