Manipulasi CSS dengan menggunakan jQuery Method addClass()

Hello guys! Kembali lagi bersama Miniblog dari Inzaghi's Blog! Jika sebelumnya sudah membuat jQuery DOM Manipulation, kali ini kita akan membuat Manipulasi CSS dengan menggunakan jQuery Method addClass().

Sumber : Tutorialsteacher.com dan Tutorials point.com

Metode jQuery addClass() menambahkan satu atau beberapa kelas CSS ke elemen yang ditentukan.

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

Pertama, tentukan pemilih untuk mendapatkan referensi elemen yang ingin Anda atur propertinya, kemudian panggil metode addClass() dengan satu atau beberapa nama kelas sebagai parameter string. Beberapa nama kelas harus dipisahkan oleh spasi.

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
                  
         $('#btnAddDivClass').click(function(){
            $('#myDiv').addClass('yellowDiv');

         });

                  
         $('#btnAddPClass').click(function(){
            $('p').addClass('impPrg');
         });
         
        });
    </script>
   <style>
    .yellowDiv{
      background-color:yellow;
      margin: 10px 0 0 0;
      height:50px;
    }
    
    .impPrg{
      font-size:16px;
      font-weight:bold;
    }
  </style>
</head>
<body>
   <h1>jQuery addClass() Method Demo</h1>
   <button id="btnAddDivClass">Add div class</button>
   <button id="btnAddPClass">Add p class</button>
   
   <div id="myDiv">
      <p>This is first paragraph.</p>
   </div>
   <div>
      <p>This is second paragraph.</p>
   </div>
   <div >
      <p>This is third paragraph.</p>
   </div>
</body>
</html>

Hasil Output :

Pada contoh di atas, kami mengatur kelas CSS dari setiap elemen <div> (#myDiv) serta beberapa elemen <p> menggunakan metode addClass().

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Manipulasi CSS dengan menggunakan jQuery Method addClass()