JQuery .css()

Secara umum digunakan untuk mengambil data nilai properti CSS pada elemen, namun bisa juga digunakan untuk mengeset properti CSS pada elemen seperti halnya menggunakan CSS.

Mengambil Data CSS dari Elemen

Katakanlah Saya memiliki elemen dengan struktur seperti ini:

HTML

<div id='box'></div>

CSS

#box {
  width:300px;
  height:250px;
  background-color:#9D0A0A;
  border:5px solid #47AD47;
  font:normal bold 16px/1.4 Arial,Sans-Serif;
  color:white;
  padding:10px;
}

JQuery

Ambil data lebar, tinggi dan warna latar belakang dari elemen #box, kemudian tampilkan data tersebut di dalam #box sebagai teks:

$(function() {
    var boxWidth  = $('#box').css('width'), // Mengambil data lebar #box
        boxHeight = $('#box').css('height'), // Mengambil data tinggi #box
        boxBg     = $('#box').css('background-color'); // Mengambil data warna background (background-color) #box

    // Saat #box disentuh...
    $('#box').hover(function() {
        // Tampilkan data-data yang telah diambil dalam bentuk teks
        $(this).text('Lebar: ' + boxWidth + ', tinggi: ' + boxHeight + ', background: ' + boxBg);

    // Saat pointer keluar dari #box...
    }, function() {
        // Hapus semua teks di dalamnya
        $(this).text('');
    });
});

JQuery: Properti CSS shorthand (margin, background, border dan yang lainnya) tidak didukung pada fungsi ini. Sebagai contoh, jika Anda ingin mengambil margin yang diberikan, gunakanlah $(elem).css('marginTop') dan $(elem).css('marginRight'), dan seterusnya… untuk mendapatkan semua data margin (harus dituliskan satu persatu)

Lihat Demo

Anda juga bisa menerapkan .css() sebagai pendeklarasi properti CSS secara langsung. Sintaks properti tunggal bisa dituliskan seperti ini:

// $(elemen).css('property','value');
$('div').css('background-color', 'red');

Untuk properti lebih dari satu bisa dituliskan seperti ini:

// $(elemen).css({property:value,property:value});
$('div').css({
    width: 200,
    height: 300,
    backgroundColor: 'red',
    border: '2px solid #333'
});

Menerapkan Fungsi .css() secara Langsung

.css() bisa digunakan untuk mengeset tampilan elemen secara langsung seperti contoh ini:

HTML

<div id='box'></div>

JQuery

Set lebar #box sebesar 200 piksel, tinggi 300 piksel, warna latar belakang merah dan border setebal 2 piksel bertipe solid dengan warna hitam:

$(function() {
    $('#box').css({
        width: 200,
        height: 300,
        'background-color': 'red',
        border: '2px solid black'
    })
});

Properti bisa diapit menggunakan tanda petik, bisa juga tidak, namun untuk pendeklarasian properti tunggal harus menggunakan tanda petik. Nilai/value bertipe numerik tidak perlu diapit dengan tanda petik meskipun sebenarnya bisa. Terutama jika Anda menyisipkan satuan di dalamnya seperti px, % dan lain-lain (Nilai berupa string seperti kode heksa warna, kata kunci warna dan lainnya harus menggunakan tanda petik).

JQuery	Kebenaran	Sebagai CSS
$('div').css({background:'black'}); $('div').css({'background':'black'}); $('div').css({background:'#000'}); $('div').css({backgroundColor:'#000'}); $('div').css({'backgroundColor':'#000'}); $('div').css({'background-color':'#000'});	Benar	div {background-color:#000;}
$('div').css({background:black}); $('div').css({background:#000}); $('div').css({backgroundColor:#000}); $('div').css({background-color:'#000'});	Salah
$('div').css({width:200}); $('div').css({width:'200px'}); $('div').css('width', 200); $('div').css('width', '200'); $('div').css('width', '200px');	Benar	div {width:200px;}
$('div').css({width:200px}); $('div').css(width, 200); $('div').css(width, '200'); $('div').css('width', 200px);	Salah

---

Yang Tidak Bisa Dilakukan CSS Namun Bisa Dilakukan .css()

CSS tidak bisa menerima nilai berupa variabel dari sebuah elemen, ataupun menyalin data dari elemen lain kemudian menyampaikannya sebagai CSS untuk menciptakan penampilan yang sama persis dengan duplikatnya (duplikasi CSS?):

HTML

<div id='box'></div>
<select id='css'>
    <option>red</option>
    <option>green</option>
    <option>blue</option>
    <option>yellow</option>
</select>

CSS

#box {
  width:200px;
  height:150px;
  background-color:red;
}

JQuery

Ubah warna latar belakang elemen #box berdasarkan selectbox:

$(function() {
    $('select#css').change(function() {
        var bgColor = $(this).val();
        $('#box').css('background-color', bgColor);
    });
});

Lihat Demo