Secara umum dipakai untuk mengambil data nilai properti CSS pada elemen, namun sanggup juga dipakai untuk mengeset properti CSS pada elemen ibarat halnya memakai CSS.
Mengambil Data CSS dari Elemen
Katakanlah Saya mempunyai elemen dengan struktur ibarat 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, lalu 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,borderdan yang lainnya) tidak didukung pada fungsi ini. Sebagai contoh, jikalau 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)
Anda juga sanggup menerapkan .css() sebagai pendeklarasi properti CSS secara langsung. Sintaks properti tunggal sanggup dituliskan ibarat ini:
// $(elemen).css('property','value'); $('div').css('background-color', 'red');Untuk properti lebih dari satu sanggup dituliskan ibarat 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() sanggup dipakai untuk mengeset tampilan elemen secara eksklusif ibarat teladan 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 sanggup diapit memakai tanda petik, sanggup juga tidak, namun untuk pendeklarasian properti tunggal harus memakai tanda petik. Nilai/value bertipe numerik tidak perlu diapit dengan tanda petik meskipun bersama-sama bisa. Terutama jikalau Anda menyisipkan satuan di dalamnya ibarat
px,%dan lain-lain (Nilai berupa string ibarat instruksi heksa warna, kata kunci warna dan lainnya harus memakai 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 sanggup mendapatkan nilai berupa variabel dari sebuah elemen, ataupun menyalin data dari elemen lain lalu menyampaikannya sebagai CSS untuk membuat 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 menurut selectbox:
$(function() { $('select#css').change(function() { var bgColor = $(this).val(); $('#box').css('background-color', bgColor); }); });