Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function updtStyle(selector, cssRules) {
    var styleSheet = null;
    for (var i = 0; i < document.styleSheets.length; i++) {
        if (!document.styleSheets[i].href) {
            styleSheet = document.styleSheets[i];
            break;
        }
    }
    if (!styleSheet)
        document.head.appendChild(document.createElement("style"));
 
    for (var i = 0; i < document.styleSheets.length; i++) {
        if (!document.styleSheets[i].href) {
            styleSheet = document.styleSheets[i];
 
            var cssRule = null;
            for (var j = 0; j < styleSheet.cssRules.length; j++) {
                cssRule = styleSheet.cssRules[j];
                Object.keys(cssRules).map(function(k) {
                    cssRule.style[k] = cssRules[k];
                });
                break;
            }
 
            if (!cssRule) {
                var newRuleText = Object.keys(cssRules).map(function(k) {
                    return k + ": " + cssRules[k];
                }).join("; ");
                styleSheet.insertRule(selector + " { " + newRuleText + "}", styleSheet.cssRules.length);
            }
            break;
        }
    }
}


Usage

1
updtStyle("#div:hover", { background: "rgba(255,255,255,.5)", "text-decoration": "underline" });


References

  1. https://stackoverflow.com/questions/7330355/javascript-set-css-after-styles/7330454#7330454
  2. https://davidwalsh.name/add-rules-stylesheets


티스토리툴바