web-dev-qa-db-ja.com

JQueryで複数のCSS属性を定義する方法

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表記では 必須 という名前のハイフンがあるためです。

jquerycss
472
Edward Tanguay

1つ以上ある場合でも、 .addClass() を使用するほうがよいでしょう。より保守しやすく読みやすい。

複数のCSSプロパティを作成したい場合は、次のようにします。

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

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

872
redsquare

jSONオブジェクトを渡します。

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

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

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

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

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

あるいは、JavaScriptのプロパティ名を使用することもできます。

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

より詳しい情報は jQueryのドキュメント にあります。

36
Sampson

これを試してください、

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

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

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

Redsquareに同意してください。ただし、text-alignのように2つのWordプロパティがある場合は、次のようにします。

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});
9
Darko Z
$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

また、プロジェクトをよりスケーラブルにするには、jQueryの組み込みのaddClassを使用することをお勧めします。

情報源： 使い方：jQuery CSSの追加と削除

8
Studio3

これを試して

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

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

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

これを試して：

$（ID名）.css（{"背景"： "＃000"、 "色"： "＃000"}）

すなわちこんにちはdivでidです。

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

5
Rizo

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

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

複数のCSS属性を変更したい場合は、以下のように object structureを使用する必要があります。

$(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つは、何かのcss onclickを追加し、2回目のクリックでそのcssを削除したい場合、そして後者の例では.toggleClass('custom-class')を使用できることです。

前の例では、すべてのCSSを以前に設定したさまざまな値で設定する必要があり、複雑になるため、classオプションを使用することをお勧めします。

1
Haritsinh Gohil