StyleSheet Utilityを使ってCSSを動的に作成/更新するサンプル

Yahoo! UI Library の StyleSheet Utilityを使うと、JavaScriptで動的にCSSを作成したり更新したりできます。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script> 
  <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/stylesheet/stylesheet-min.js"></script> 
  <script type="text/javascript">
    function onLoad() {
      // CSSを新規に作成
      var css = ".box {"
        + "  background-color: #FF3333;"
        + "  width: 100px;"
        + "  height: 100px;"
        + "  float: left;"
        + "  margin: 10px;"
        + "}";
      sheet = new YAHOO.util.StyleSheet(css); 
    }
    // boxの背景色を変更。
    function changeColor(color) {
      sheet.set( ".box", {
        backgroundColor : color
      });
    }
  </script>
</head>
<body onload="onLoad();">
  <div>
    <a href="javascript:changeColor('#FF3333');">赤にする</a>
    |<a href="javascript:changeColor('#33FF33');">緑にする</a>
    |<a href="javascript:changeColor('#3333FF');">青にする</a>
  </div>
  <div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>