Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

jQuery .css()

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 1 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!