JavaScriptによるスタイルシート(CSS)の操作

/* 外部スタイルシート（ルール）の取得 */
function getAllStyleRule() {
  var styleSheets = document.styleSheets;
  var str = '';

  for (var i = 0; i < styleSheets.length; i++) {
    var styleSheet = styleSheets[i];
    var rules = styleSheet.rules || styleSheet.cssRules;
    str += "[" + styleSheet.href + "]\n";

    for (var j = 0; j < rules.length; j++) {
      var rule = rules[j];
      str += rule.selectorText + " {\n";
      str += rule.style.cssText + "\n";
      str += "}\n";
    }
  }

  return(str);
}

/* 各タグのスタイル属性、クラス属性、ID属性の取得 */
function getAllStyle() {
  var isMSIE = /*@cc_on!@*/false;

  var body = document.getElementsByTagName('body')[0];
  if (body == null) { return; }
 
  return(getChild(body));

  function getChild(obj) {
    var str = '';
    var val = '';
    var nodes = obj.childNodes;
    if (nodes) {
      for (var i = 0; i < nodes.length; i++) {
        node = nodes[i];
        if (node.nodeType != 1) { continue; }

        // get element name
        str += "[" + node.nodeName + "]\n";

        // get style attribute
        if (isMSIE) { // for IE8, IE7, IE6, Sleipnir
          val = node.style.cssText;
        } else { // for IE8, FireFox, Opera, Safari, Crome, Sleipnir
          val = node.getAttribute('style');
        }
        if (val) {
          str += "style = \"" + val + "\"\n";
        }

        // get class attribute
        val = node.getAttribute('class') || node.getAttribute('className');
        if (val) {
          str += "class = \"" + val + "\"\n";
        }

        // get id attribute
        val = node.id;
        if (val) {
          str += "id = \"" + val + "\"\n";
        }

        if (node.hasChildNodes()) {
          str += getChild(node);
        }
      }
    }
    return(str);
  }
}

/* スタイルの追加（変更） */
function addStyleRule(selector, declaration) {
  var isMSIE = /*@cc_on!@*/false;
  var sheet;

  if (document.styleSheets.length) {  // 最後のスタイルシートを取得
    sheet = document.styleSheets[document.styleSheets.length - 1];

  } else {  // StyleSheetがない場合、StyleSheetを作成
    if (isMSIE) {  // for IE8, Sleipnir
      sheet = document.createStyleSheet();

    } else {  // for FireFox, Opera, Safari, Crome
      var head = document.getElementsByTagName('head')[0];
      if (head == null) { return(); }
      var style = document.createElement('style');
      head.appendChild(style);
      sheet = style.sheet;
    }
  }

  if (isMSIE) {  // for IE8, Sleipnir
    sheet.addRule(selector, declaration);
  } else {  // for FireFox, Opera, Safari, Crome
    sheet.insertRule(selector + '{' + declaration + '}', sheet.cssRules.length);
  }
}