Change CSS rule at runtime

后端 未结 7 1719
清歌不尽
清歌不尽 2020-12-19 20:15

How do I change any CSS properties during runtime?
Suppose I have:

#mycss {
   background:#000;
   padding:0;
}

Then during runtime,

7条回答
  •  余生分开走
    2020-12-19 21:09

    First of all, CSS should be inserted as "titled" link:

    
    

    If I will to change in this CSS next selector (no matter what [ctr-panel~="button"] means):

    [ctr-panel~="button"] {
        width: 25px;
        min-width:  25px;
    }
    

    To do so in JS write:

        for (var i = 0; i < document.styleSheets.length; i++) {
            var sheet = document.styleSheets[i];
            if (sheet.title == 'fillCtrl'){
                for (var j=0, n=sheet.cssRules.length; j < n; j++){
                    var rule = sheet.cssRules[j]
                    if (rule.selectorText == '[ctr-panel~="button"]'){
                        rule.style.cssText="width: 12px; min-width: 15px;"
                    }
                }
            }
        }
    

    Obviously, it might be another logics to find appropriate rule.style.

提交回复
热议问题