Jquery

Class CSS Get dan Set jQuery HTML Kode dan Contohnya

jQuery Memanipulasi CSS

jQuery memiliki beberapa metode untuk manipulasi CSS. Berikut ini metode jQuery manipuasi CSS :

  • addClass() – Menambahkan satu atau lebih kelas ke elemen yang dipilih
  • removeClass() – Menghapus satu atau lebih kelas dari elemen yang dipilih
  • toggleClass() – Beralih antara menambah / menghapus kelas dari elemen yang dipilih
  • css() – Menyetel atau mengembalikan atribut gaya

Contoh Stylesheet

Stylesheet berikut akan digunakan untuk semua contoh di halaman ini:

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}

Metode jQuery addClass()

Contoh berikut menunjukkan cara menambahkan atribut kelas ke elemen yang berbeda. Tentu saja kita akan memilih beberapa elemen, saat menambahkan kelas:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: red;
}
</style>
</head>
<body>

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>

<p> Ini adalah paragraf. </p>
<p> Ini adalah paragraf lain. </p>

<div> Ini adalah beberapa teks penting! </div> <br>

<button> Tambahkan kelas ke elemen </button>

</body>
</html>

Kita juga bisa menentukan beberapa kelas dalam metode addClass():

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });
});
</script>
<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
</style>
</head>
<body>
  
<div id = "div1"> Ini adalah teks. </div>
<div id = "div2"> Ini adalah teks. </div>
<br>

<button> Tambahkan kelas ke elemen div pertama </button>

</body>
</html>

Metode jQuery removeClass()

Contoh berikut menunjukkan cara menghapus atribut kelas tertentu dari elemen yang berbeda:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").removeClass("blue");
  });
});
</script>
<style>
.blue {
  color: yellow;
}
</style>
</head>
<body>

<h1 class = "blue"> Heading 1 </h1>
<h2 class = "blue"> Heading 2 </h2>

<p class = "blue"> Ini adalah paragraf. </p>
<p> Ini adalah paragraf lain. </p>

<button> Hapus kelas dari elemen </button>

</body>
</html>

Metode jQuery toggleClass()

Contoh berikut akan menunjukkan cara menggunakan metode jQuery toggleClass(). Metode ini beralih antara menambahkan / menghapus kelas dari elemen yang dipilih:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
  });
});
</script>
<style>
.blue {
  color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>

<button>Toggle class</button>

</body>
</html>

Hanifah Nurbaeti

Share
Tags: JQueryJQuery HTML