How do I change any CSS properties during runtime?
Suppose I have:
#mycss {
background:#000;
padding:0;
}
Then during runtime,
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.