Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

CSSの文字列でstyleを指定したい

割と有名なのでスルーしてもいいかも。
prototype.jsを使ってる人には有効かなあ。
そもそもprototype.jsのElement.setStyleは引き数がobjectなので

var styleObj = {
  'height' : '20px',
  'width' : '200px'
  /* .... */
}
Element.setStyle('hoge', styleObj);

といった感じなんだけど、objectに直すのがちとめんどい。
デザイナさんからもらったりしらCSSの文字列をそのまま渡せたらもっと楽な気がする。
でパースしてまえと。

  function parseStyle(style){
    var styles = style.split(';');
    var re = /^\s*([a-zA-Z\-_0-9]+)\s*:\s*(\S(.+\S)?)\s*$/;
    var obj = {};
    for(var i = 0; i < styles.length; i++){
      var parts = re.exec(styles[i]);
      if(parts){
        obj[parts[1]] = parts[2];
      }
    }
    return obj;
  }

これだと

var styleObj = parseStyle('position: absolute;background: #fff;color:#000000;')
Element.setStyle('hoge', styleObj);

と少しスッキリする。
まあsetStyleに仕込めばもっとスッキリかなあ。
まあでも大量に仕込むのであればjavascriptCSSをいじった方がもっといいよね。
うくく。