Beberapa Cara Manipulasi CSS dengan JQuery

28/04/2020    Maykhel David    1208    Website

Beberapa Cara Manipulasi CSS dengan JQuery - Hallo Semuanya, pada artikel kali ini saya akan membuat sebuah daftar yang bisa kalian simpan sebagai referensi untuk bagaimana cara manipulasi css menggunakan jquery. CSS sendiri sudah bisa dibilang sangat powerful, tetapi untuk mendapatkan interaksi secara sempurna kita memerlukan Bahasa program seperti Javascript, pada kali ini kita akan menggunakan JQuery sebagai framework javascript yang sangat powerful.

Berikut adalah daftar Method manipulasi css dengan JQuery

1.    Method css()

Method css() ini memiliki dua fungsi dasar, yaitu mendapatkan style yang sudah ada, atau memberikan style baru pada elemen HTML

Kode Dasar:

$('selector expression').css('style property name','value');

$('selector expression').css({
    'style property name':'value',
});

Contoh:

$('#myDiv').css('background-color','yellow');
$('p').css({'background-color': 'red','width':'400px'});

$('#myDiv').css('background-color'); // mendapatkan nilai rgb(255,255,0) untuk warna kuning

<div id="myDiv">
    <p>Ini paragraf pertama.</p>
</div>
<div>
    <p>Ini paragraf Kedua.</p>
</div>
<div >
    <p>Ini paragraf ketiga.</p>
</div>

2.    Method addClass()

Method addClass() ini berfungsi untuk menambahkan class baru pada satu atau beberapa elemen tertentu

Kode Dasar:

$('selector expression').addClass('css class name');

Contoh:

$('#myDiv').addClass('yellowDiv');
$('p').addClass('impPrg');

<div id="myDiv">
    <p>Ini paragraf pertama.</p>
</div>
<div>
    <p>Ini paragraf Kedua.</p>
</div>
<div >
    <p>Ini paragraf ketiga.</p>
</div>

3.    Method hasClass()

Menentukan atau mendapatkan elemen tertentu apakah memiliki class pada satu atau beberapa elemen tertentu

4.    Method removeClass()

Method ini berfungsi untuk menghapus sebuah class, atau beberapa class dari satu atau beberapa elemen tertentu

5.    Method toggleClass()

Method toggleClass() ini berfungsi untuk melakukan toggle (menambahkan / menghilangkan) sebuah  atau beberapa clas pada elemen tertentu

Kode Dasar:

$('selector expression').toggleClass('css class name');

Contoh:

$('#myDiv').toggleClass('redDiv');

<div id="myDiv" class="yellowDiv">
</div>

Baiklah semuanya, demikian artikel kali ini yang membahas tentang beberapa cara memanipulasi CSS menggunakan jquery.

Poin yang harus diingat:

-    Method JQuery membuat kalian bisa memanipulasi css, baik itu class ataupun property cssnya
-    Gunakan selector untuk menentukan elemen yang ingin diubah, dan dilanjutkan dengan method diatas untuk membuat perubahan pada elemen.
-    Metode jquery diatas adalah bagian dari banyaknya metode untuk memanipulasi DOM pada HTML.

No data.