jQueryでCSSのプロパティに変数を付与

javascriptで、ブラウザの種類を判別し変数prefix にfirefoxなら-moz-、webkitなら-webkit-を格納するスクリプトを作成しました。

jquery1.7にてCSSを操作する際に

$("#hoge").css({
prefix + "animation-name" : "name",
prefix + "animation-duration": "5s"
});

と記述した所、構文エラーになってしまいました。

ｊQueryでCSSの値に変数を使用することはできるようですが、プロパティに変数を使用することは出来ないのでしょうか？

No.1 回答者： fujillin 回答日時： 2012/10/25 19:04

通常のプロパティリストでは、プロパティをクォーテーションで囲まなくてもよくなっていますので、エラーの原因は、変数とプロパティ名との区別が付かないところに由来しているのではないでしょうか？（←想像です。

ちゃんと調べたわけではありません。）


プロパティ名に変数を用いたければ、引数そのものを変数にしておいて
　propertyList[prefix + property] = value;
などのようにして代入することで対応可能かと思います。

この回答へのお礼

お礼が遅くなってしまい申し訳ございませんでした。

ご教授頂いた書き方で試してみたところ、普通にjavascriptからstyleを操作する場合ではプロパティに変数を付与出来たのですが、jQueryでは構文エラーが出てしまいました。

ご回答いただきありがとうございました。

お礼日時：2012/11/05 17:57

No.2 ベストアンサー 回答者： fujillin 回答日時： 2012/11/06 17:41

ANo1です。

＞普通にjavascriptからstyleを操作する場合ではプロパティに変数を付与出来たのですが、
＞jQueryでは構文エラーが出てしまいました
逆のはずです。
通常のjavascriptではオブジェクトを引数にはできないはずでは？

どのような書き方をなさっているのか不明ですが、手元にあったjQuryv1.5.2とv1.7.1で確認してみましたが、
　$("#hoge").css(propertyList);
で、実行できますし、エラーも出ないようです。

この回答へのお礼

申し訳ございません、単純なミスだったようです。

propertyList[prefix + "Animation"] = "anim 1 2s ease";
$("#hoge").css(propertyList);

で動かなかったのですが

propertyList= [];

を付け足すことで動作しました。

ご教授頂きましてありがとうございました。

お礼日時：2012/11/09 13:25