Bagaimana cara mendefinisikan beberapa atribut CSS di jQuery?

Apakah ada cara sintaksis di jQuery untuk mendefinisikan beberapa atribut CSS tanpa merangkai semuanya ke kanan seperti ini:

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

Jika Anda memiliki, katakanlah, 20 kode ini menjadi sulit dibaca, ada solusi?

Dari jQuery API, misalnya, jQuery memahami dan mengembalikan nilai yang benar untuk keduanya

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

dan

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

Perhatikan bahwa dengan notasi DOM, tanda kutip di sekitar nama properti adalah opsional , tetapi dengan notasi CSS mereka diperlukan karena tanda hubung dalam nama.

Lebih baik gunakan saja .addClass()walaupun Anda punya 1 atau lebih. Lebih mudah dikelola dan dibaca.

Jika Anda benar-benar memiliki keinginan untuk melakukan beberapa properti CSS maka gunakan yang berikut ini:

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

NB!
Setiap properti CSS dengan tanda hubung perlu dikutip.
Saya telah menempatkan tanda kutip sehingga tidak ada yang perlu mengklarifikasi itu, dan kodenya akan berfungsi 100%.

Lulus sebagai Obyek:

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

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

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

Menggunakan objek biasa, Anda bisa memasangkan string yang mewakili nama properti dengan nilai terkait. Mengubah warna latar belakang, dan membuat teks lebih tebal, misalnya akan terlihat seperti ini:

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

Atau, Anda juga dapat menggunakan nama properti JavaScript:

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

Informasi lebih lanjut dapat ditemukan di dokumentasi jQuery .

tolong coba ini,

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

Anda juga dapat menggunakan attrbersama dengan style:

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

Setuju dengan redsquare namun perlu disebutkan bahwa jika Anda memiliki properti dua kata seperti text-align Anda akan melakukan ini:

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

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

Juga, mungkin lebih baik menggunakan jQuery's built in addClass untuk membuat proyek Anda lebih terukur.

Sumber: Cara: jQuery Tambahkan CSS dan Hapus CSS

Coba ini

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

Naskah

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

Html

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

Anda Bisa Coba Ini

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

Cara terbaik untuk menggunakan variabel

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

jika Anda ingin mengubah beberapa atribut css maka Anda harus menggunakan struktur objek seperti di bawah ini:

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

tetapi menjadi lebih buruk ketika kami ingin mengubah banyak gaya , jadi apa yang saya sarankan kepada Anda adalah menambahkan kelas alih-alih mengubah css menggunakan jQuery, dan menambahkan kelas lebih mudah dibaca juga.

lihat contoh di bawah ini:

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');
});

Salah satu keuntungan dari contoh terakhir daripada yang pertama adalah jika Anda ingin menambahkan beberapa css onclickdari sesuatu dan ingin menghapus css pada klik kedua maka pada contoh terakhir Anda dapat menggunakan.toggleClass('custom-class')

di mana dalam contoh sebelumnya Anda harus mengatur semua css dengan nilai yang berbeda yang telah Anda tetapkan sebelumnya dan itu akan rumit, jadi menggunakan opsi kelas akan menjadi solusi yang lebih baik.

Kamu bisa menggunakan

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

Cara terbaik adalah menggunakan $ ('selector'). AddClass ('custom-class') dan

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