静的⇒動的

js CSS

uuAltCSS.js version 0.1 は、CSS を元に静的なレンダリングを行っていましたが、次の version では JavaScript による動的なスタイルの変更をサポートする予定です。

デモ

http://pigs.sourceforge.jp/blog/20090814/20090814.htm

以下の API で CSS の解析結果を公開する予定です。

  • uuAltCSS.getRuleset() - 解析済みのCSSの宣言の一覧を格納する配列を返します。
  • uuAltCSS.getDeclaredValues(node) - ノードに割り当てられているスタイルに関する情報( { order, prop } )を返します。order には "color,background," のようにスタイルが宣言された順番が文字列で格納され、prop には優先度を考慮した宣言(プロパティと値)のペアが格納されています。
  • uuAltCSS.getDirtyCSS() - 収集したCSSを返します。返される文字列は余計な改行コードや空白等を含んだ状態のダーティなものです。
  • uuAltCSS.getExStyle(node, prop) - getComputedStyle ライクなスタイル情報を文字列で返します。IE では currentStyle 相当の情報を、その他のブラウザなら getComputedStyle() 相当の情報を返します。また、-uu-xxx 等の情報も取得できます。
  • uuAltCSS.setExStyle(node, prop, value, redraw = false) - スタイルを適用します。-uu-xxx 等も設定できます。redraw = true を指定すると、自動的に再描画を行います。


誰かが、ちょっとがんばれば、

  • calc() を実装したり
  • CSS に定数の概念を持ち込んだり
  • -oreore-color: のような新種の CSS プロパティを追加したり

なーんてことができるかもしれません。