Section Artikel
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 dipilihremoveClass()– Menghapus satu atau lebih kelas dari elemen yang dipilihtoggleClass()– Beralih antara menambah / menghapus kelas dari elemen yang dipilihcss()– 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>
