jQueryで複数のCSS属性を定義する方法は？

次のようにすべてを右側に文字列化することなく複数のCSS属性を定義するための構文的な方法はjQueryにありますか？

$("#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()1つ以上持っていてもそのまま使用した方がいいです。より保守的で読みやすい。

実際に複数のCSSプロパティを実行したい場合は、以下を使用します。

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

NB！ハイフン
を含むCSSプロパティはすべて引用符で囲む必要があります。
引用符を付けたので、誰もそれを明確にする必要はなく、コードは100％機能します。

オブジェクトとして渡します：

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

プレーンオブジェクトを使用すると、プロパティ名を表す文字列と対応する値をペアにすることができます。たとえば、背景色を変更してテキストを太字にすると、次のようになります。

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

または、JavaScriptプロパティ名も使用できます。

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

詳細については、jQueryのドキュメントをご覧ください。

これを試してください、

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

attrと一緒に使用することもできますstyle：

$('#message').attr("style", "width:550; height:300; font-size:8px" );

redsquareに同意しますが、次のように2ワードのプロパティがある場合は言及する価値text-alignがあります。

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

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

また、jQueryのビルトインを使用しaddClassてプロジェクトをよりスケーラブルにする方がよい場合もあります。

ソース：方法：jQuery CSSの追加とCSSの削除

これを試して

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

脚本

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

HTML

<div id="hello"></div>

あなたはこれを試すことができます

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

変数を使用する最良の方法

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

複数のcss属性を変更する場合は、次のようにオブジェクト構造を使用する必要があります。

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

しかし、多くのスタイルを変更したい場合はさらに悪化します。そのため、jQueryを使用してcssを変更するのではなく、クラスを追加することをお勧めします。また、クラスの追加も読みやすくなっています。

以下の例を参照してください：

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

前者に対する後者の例の1つの利点はonclick、何かのcssを追加し、2回目のクリックでそのcssを削除する場合、後者の例では次のように使用できます.toggleClass('custom-class')

前の例では、すべてのcssを以前に設定した異なる値で設定する必要があり、複雑になるため、クラスオプションを使用する方がより良い解決策になります。

使用できます

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

最善の方法は、$（ 'selector'）。addClass（ 'custom-class'）を使用することです。

.custom-class{
width:16px,
color: green;
margin: 0;
}