1. ホーム
  2. jquery

[解決済み] jQueryで複数のCSS属性を定義するには?

2022-03-18 08:31:53

質問

jQueryで複数のCSS属性を定義するための構文的な方法はありますか?このように右側にすべてを列挙する必要はありません。

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

これが20個もあると、コードが読みづらくなってしまいます。

jQueryのAPIから、例えば、jQueryは以下の両方の値を理解し、正しい値を返します。

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

そして

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

DOM記法では、プロパティ名を引用符で囲んでいることに注意してください。 任意 しかし、CSS記法では 必須 ハイフンが入っているため

解決方法は?

を使うのがベターです。 .addClass() .removeClass() 1つ以上のスタイルを変更する場合であっても。その方がメンテナンス性が高く、読みやすいからです。

どうしても複数のCSSプロパティを行いたいのであれば、以下のように使用します。

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

NB!
CSSプロパティに ハイフン を引用する必要があります。
私は引用符を配置したので、誰もそれを明確にする必要はありませんし、コードは100%機能します。