jQuery.dataとsetDataイベント - 地球ウォーカー２

.data()メソッドを使う利点の1つは、ターゲット要素でgetDataイベントとsetDataイベントを暗黙的に発生させることである。

を見て思った。
setDataイベントにスタイルを変更する関数を割り当てておけば、.data()でデータを変更したときに自動でスタイルが適用されて便利かも、と。
デモはこちら
幅と高さだったら.width()メソッドと.height()メソッド使えばすむことに気づいた。

// setDataイベントを割り当てる
// .dataメソッドが呼び出されたタイミングで発動し、styleを変更する
$('#target')
  .bind('setData', function(event, key, value) {
    // サイズ系プロパティの場合、"px"を付加
    // こうしておけば、データとして持たせる値に文字列"px"を意識する必要がなくなる
    if (key == 'px') {
      for (var p in value) {
        $(this).css(p, value[p]+'px');
      }
    }
    // カラーの場合、先頭に"#"を付加
    else if (key == 'color') {
      for (var p in value) {
        $(this).css(p, '#'+value[p]);
      }
    }
    // それ以外の場合、そのままstyleを設定する
    else if (key == 'otherStyles') {
      for (var p in value) {
        $(this).css(p, value[p]);
      }
    }
  });

// .dataメソッドを呼び出すとsetDataイベントが発動する
$('#target')
  .data('px', {
    // 数値を設定するだけで、"px"が付加された値がstyleに適用される
    width: 100,
    height: 100,
  })
  .data('color', {
    backgroundColor: 'EE8'
  });