Bagaimana cara mengubah CSS menggunakan jQuery?

Saya mencoba mengubah CSS menggunakan jQuery:

$(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>

Apa yang kulewatkan di sini?

Abaikan orang-orang yang menyarankan bahwa nama properti adalah masalahnya. Dokumentasi jQuery API secara eksplisit menyatakan bahwa kedua notasi dapat diterima: http://api.jquery.com/css/

Masalah sebenarnya adalah Anda kehilangan kurung kurawal penutup pada baris ini:

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

Ubah ke ini:

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

Ini demo yang berfungsi: 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>

Anda dapat melakukannya:

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

Atau:

$("h1").css({backgroundColor: "yellow"});

Untuk sedikit memperjelas, karena beberapa jawaban memberikan informasi yang salah:

Metode jQuery .css () memungkinkan penggunaan notasi DOM atau CSS dalam banyak kasus. Jadi, keduanya backgroundColordan background-colorakan menyelesaikan pekerjaan.

Selain itu, ketika Anda menelepon .css()dengan argumen, Anda memiliki dua pilihan untuk apa argumen itu. Mereka dapat berupa 2 string yang dipisahkan koma yang mewakili properti css dan nilainya, atau itu bisa berupa objek Javascript yang mengandung satu atau lebih pasangan nilai kunci dari properti dan nilai CSS.

Kesimpulannya satu-satunya hal yang salah dengan kode Anda adalah hilang }. Baris tersebut harus berbunyi:

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

Anda tidak dapat meninggalkan kurung keriting keluar, tetapi Anda dapat meninggalkan tanda kutip dari sekitar backgroundColordan color. Jika Anda menggunakan background-colorAnda harus meletakkan tanda kutip di sekitarnya karena tanda hubung.

Secara umum, adalah kebiasaan yang baik untuk mengutip objek Javascript Anda, karena masalah dapat muncul jika Anda tidak mengutip kata kunci yang ada .

Sebuah catatan akhir adalah bahwa tentang jQuery .ready () metode

$(handler);

adalah identik dengan:

$(document).ready(handler);

serta formulir ketiga yang tidak disarankan.

Ini berarti $(init)benar-benar benar, karena inithandler dalam hal itu. Jadi, initakan dipecat ketika DOM dibangun.

Ketika Anda menggunakan properti Multiple css dengan jQuery maka Anda harus menggunakan kurung kurawal dalam memulai dan pada akhirnya. Anda melewatkan kurung kurawal berakhir.

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

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

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

Anda dapat melihat tutorial jQuery CSS Selector ini .

The .css()Metode membuatnya super sederhana untuk menemukan dan sifat set CSS dan dikombinasikan dengan metode lain seperti .animate (), Anda dapat membuat beberapa efek keren di situs Anda.

Dalam bentuknya yang paling sederhana, .css()metode ini dapat mengatur satu properti CSS untuk satu set elemen yang cocok. Anda hanya meneruskan properti dan nilai sebagai string dan properti CSS elemen diubah.

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

Ini akan mengatur properti 'warna latar belakang' ke 'merah' untuk elemen apa pun yang memiliki kelas 'contoh'.

Tetapi Anda tidak terbatas hanya mengubah satu properti pada satu waktu. Tentu, Anda bisa menambahkan banyak objek jQuery identik, masing-masing hanya mengubah satu properti pada satu waktu, tetapi ini membuat beberapa, panggilan yang tidak perlu ke DOM dan banyak kode berulang.

Sebagai gantinya, Anda bisa meneruskan .css()metode objek Javascript yang berisi properti dan nilai sebagai pasangan kunci / nilai. Dengan cara ini, setiap properti kemudian akan ditetapkan pada objek jQuery sekaligus.

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

Ini akan mengubah semua properti CSS ini pada elemen '.example'.

Hanya ingin menambahkan bahwa ketika menggunakan angka untuk nilai dengan metode css Anda harus menambahkannya di luar tanda kutip dan kemudian menambahkan unit CSS dalam tanda kutip.

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

atau

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

<!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>

$ (". radioValue"). css ({"background-color": "- webkit-linear-gradient (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)", "color": "# 454545 "," padding ":" 8px "});

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

itu hilang "}"setelahwhite"

ubah ke ini

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