jQueryを使用してCSSを変更するには？

133

jQueryを使用してCSSを変更しようとしています：

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>
スニペットを展開

ここで何が欠けていますか？

javascript  jquery  css 
— ユーザー449914
ソース
2
修正されました。以下に回答するように、2つの解決策があります：（1）中括弧を削除し、backgroundColorをbackground-color（cssクラス）​​に変更するか、または-コアの問題）不足している中括弧を最後に置き、DOM / JS表記ウィッチも使用します動作します。みんな、ありがとう！
— user449914
1
JavaScriptでCSSを操作することは、不適切なプラクティスと見なすことができます。クラスの追加/削除/切り替えを検討してください。
— オースティン

回答:

210

プロパティ名が問題であることを示唆している人々を無視してください。jQuery APIのドキュメントには、どちらの表記も許容できると明示的に記載されています。http：//api.jquery.com/css/

実際の問題は、次の行に閉じ中括弧がないことです。

$("#myParagraph").css({"backgroundColor":"black","color":"white");

これを次のように変更します。

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

これが実際のデモです：http : //jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>
スニペットを展開

— エンダー
ソース
どのようにして、たとえば、変数として値を追加するpaddingTopなどのxピクセルの数？私が試したあらゆる種類の構文はエラーになりました。
— メンタリスト
気にしないで。$("#main").css({paddingTop: (var_name+20) + "px"});
— 了解しました
52

次のいずれかを実行できます。

$("h1").css("background-color", "yellow");

または：

$("h1").css({backgroundColor: "yellow"});
— サルフラズ
ソース
3
{"backgroundColor": "yellow"}不要ですが、有効です。
— Tgr
@ user449914：オブジェクトリテラルのプロパティ名を引用符で囲む必要はありません- {foo: "bar"}と同じ{"foo": "bar"}です。
— Tgr
24

いくつかの答えは間違った情報を提供しているので、少し物事を明確にするために：

jQuery .css（）メソッドでは、多くの場合、DOMまたはCSS表記のいずれかを使用できます。だから、両方backgroundColorとbackground-color仕事を得るでしょう。

さらに、.css()引数を指定して呼び出す場合、引数が何であるかについて2つの選択肢があります。それらは、CSSプロパティとその値を表す2つのコンマ区切りの文字列にすることも、CSSプロパティと値の1つ以上のキーと値のペアを含むJavaScriptオブジェクトにすることもできます。

結論として、あなたのコードの唯一の問題は行方不明}です。行は次のようになります。

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

あなたは、中括弧を省略することはできませんが、周りからの引用符を残すことができるbackgroundColorとcolor。使用background-colorする場合は、ハイフンのために引用符で囲む必要があります。

一般に、既存のキーワードを引用しないと問題が発生する可能性があるため、Javascriptオブジェクトを引用することをお勧めします。

最後に、jQuery .ready（）メソッドについて

$(handler);

ある同義と：

$(document).ready(handler);

同様に、3番目の推奨されないフォームを使用します。

これは、そのインスタンスのハンドラーである$(init)ため、完全に正しいことを意味しinitます。したがって、initDOMが構築されるときに発生します。

— ピーター・アジュタイ
ソース
10

jQueryで複数のcssプロパティを使用している場合は、開始と終了で中括弧を使用する必要があります。終了中かっこがありません。

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}

このjQuery CSS Selectorチュートリアルをご覧ください。

— サディ
ソース
5

この.css()メソッドを使用すると、CSSプロパティの検索と設定が非常に簡単になり、.animate（）などの他のメソッドと組み合わせると、サイトにクールな効果を加えることができます。

最も単純な形式では、.css()メソッドは、一致する要素の特定のセットに対して単一のCSSプロパティを設定できます。プロパティと値を文字列として渡すだけで、要素のCSSプロパティが変更されます。

$('.example').css('background-color', 'red');

これにより、「example」のクラスを持つ要素の「background-color」プロパティが「red」に設定されます。

ただし、一度に1つのプロパティを変更するだけに限定されません。もちろん、一連の同一のjQueryオブジェクトを追加して、それぞれが一度に1つのプロパティのみを変更することもできますが、これはDOMへの不要な呼び出しを何度も行っており、多くの繰り返しコードです。

代わりに、.css()プロパティと値を含むJavaScriptオブジェクトをキーと値のペアとしてメソッドに渡すことができます。これにより、jQueryオブジェクトに各プロパティが一度に設定されます。

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

これにより、「。example」要素のこれらすべてのCSSプロパティが変更されます。

— ジョニー
ソース
3

cssメソッドで値に数値を使用する場合、アポストロフィの外側に数値を追加してから、CSS ユニットをアポストロフィで追加する必要があることを追加したかっただけです。

$('.block').css('width',50 + '%');

または

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });
— ローテクサン
ソース
1 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>
— ニキットバローチヤ
ソース
1

$（ "。radioValue"）。css（{"background-color"： "-webkit-linear-gradient（＃e9e9e9、rgba（255、255、255、0.43137254901960786）、＃e9e9e9）"、 "color"： "＃ 454545 "、" padding "：" 8px "}）;

— 道王寺カタラ
ソース
2
少しの説明も役立つはずです。
— timiTao 2018年
1 

$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
<h1>Header</h1>
<p id="myParagraph">This is some paragraph text</p>
</div>
スニペットを展開

このコードは質問に答える可能性がありますが、問題を解決する方法と理由に関する情報を提供すると、長期的な価値が向上します。
— L_J 2018
0

不正なコード：$("#myParagraph").css({"backgroundColor":"black","color":"white");

"}"その後に行方不明 white"

これに変えて

 $("#myParagraph").css({"background-color":"black","color":"white"});
— Galexy
ソース
8
あなたは最も人気のある答えを繰り返しましたが、わずか3 1/2年後です。
— Curtis Patrick
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.