Search notes:

CSS - JavaScript example: document.styleSheets

<!DOCTYPE html>
<!-- 

  http://stackoverflow.com/a/524721/180275

  A page contains one or more style sheets which in turn contain one or more
  rules which contain the actual style declarations.


-->
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>document.styleSheets</title>

<script type="text/javascript">

  function main() {

    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode('.d1 { color:blue ; font-family: sans-serif; font-size: 100px; margin-bottom: 30px}' ));
    style.appendChild(document.createTextNode('.d2 { color:red  ; font-family:      serif; font-size:  30px;}' ));

    document.head.appendChild(style);
  }

  function removeCssRule() {
    var styles = document.styleSheets[0];

    if (styles.cssRules.length) {
      styles.deleteRule(0);
    }
  }

  function addCssRule() {
    var styles = document.styleSheets[0];

    styles.insertRule('.d3 { color: green; font-size: 50px } ', 0);
  }

  function getRules() {

    var styles = document.styleSheets[0];

    var rules = '';
    for (var i = 0; i<styles.cssRules.length; i++) {
      rules += styles.cssRules[i].cssText + "\n";
    }
    alert(rules);

  }

</script>

</head>
<body onload='main();'>

  <input type="submit" value="Remove a CSS Rule" onclick="removeCssRule();">
  <input type="submit" value="Add a CSS Rule" onclick="addCssRule();">
  <input type="submit" value="Get Rules" onclick="getRules();">

  <div class='d1'>Text in first div</div>
  <div class='d2'>Text in second div</div>
  <div class='d3'>Text in third div</div>

</body>
</html>

Github repository about-css, path: /javascript/document.styleSheets.html

CSS - JavaScript example: document.styleSheets

See also