Mengubah Konten dan Gaya Elemen: Jadi Pawang Website yang Keren!

 

 

Pernah nggak sih, kamu nge-scroll website dan ngeliat elemen-elemen yang bisa diubah-ubah dengan mudah? Misalnya, kamu ngeklik tombol, dan boom! Warna background berubah, teksnya berganti, atau bahkan animasi yang bikin mata kamu berdecak kagum. Nah, itu semua bisa kamu lakukan dengan JavaScript! Jadi, kamu bisa jadi kayak pawang yang mengubah elemen-elemen di website sesuka hati, hanya dengan beberapa baris kode. Siap-siap jadi sihir banget deh!

Yuk, kita pelajari cara mengubah konten dan gaya elemen di DOM! Kamu bakal jadi master dalam nge-custom website tanpa perlu jadi ahli desain!

1. Mengubah Konten dengan innerHTML: Magic!

Kamu pasti pernah lihat halaman yang punya teks atau gambar, kan? Nah, kalau kamu pengen mengubah teks atau konten HTML yang ada di elemen, kamu bisa pakai innerHTML. Ini seperti tombol ajaib yang bisa bikin teks atau HTML di dalam elemen berubah—langsung tanpa repot-repot!

Contoh Mengubah Konten dengan innerHTML:

<h1 id="judul">Selamat datang di Website!</h1>
<button onclick="ubahKonten()">Ubah Konten</button>

<script>
  function ubahKonten() {
    document.getElementById("judul").innerHTML = "Selamat datang di Dunia JavaScript!";
  }
</script>

Penjelasan: Di sini, kita punya elemen <h1> dengan id="judul" yang berisi teks "Selamat datang di Website!". Saat tombol diklik, kita pakai innerHTML untuk mengganti teksnya jadi "Selamat datang di Dunia JavaScript!". Mudah banget, kan?

2. Mengubah Gaya Elemen dengan style: Gaya Hidup Baru!

Bosen lihat elemen yang itu-itu aja? Kamu bisa ngasih gaya baru ke elemen-elemen HTML menggunakan properti style. Misalnya, kamu pengen ngubah warna, ukuran font, atau latar belakang elemen, tinggal pakai style! Jadi website kamu bisa tampil lebih kece, hanya dengan kode simpel.

Contoh Mengubah Gaya dengan style:

<p id="paragraf">Ini paragraf yang akan berubah gayanya!</p>
<button onclick="ubahGaya()">Ubah Gaya</button>

<script>
  function ubahGaya() {
    document.getElementById("paragraf").style.color = "green";
    document.getElementById("paragraf").style.fontSize = "30px";
  }
</script>

Penjelasan:Kita ngubah warna teks jadi hijau dan ukuran font jadi besar banget! Semakin besar font, semakin keren tampilannya—kayak lagi jadi bintang utama di panggung, ya!

3. Mengubah Gaya dengan classList: Ubah Kelas Tanpa Ribet!

Terkadang kamu pengen ngubah banyak gaya sekaligus, bukan cuma satu-satu pake style. Nah, di sini classList jadi penyelamat. Kamu bisa menambah, menghapus, atau mengganti kelas CSS dari elemen, dan secara otomatis gaya elemen itu akan berubah sesuai dengan yang ada di dalam kelas. Jadi, nggak perlu ribet ngubah satu per satu.

Contoh Mengubah Gaya dengan classList:

<p id="paragraf" class="normal">Paragraf ini akan berubah gayanya!</p>
<button onclick="ubahKelas()">Ubah Kelas</button>

<style>
  .normal {
    font-size: 20px;
    color: black;
  }
  .besar {
    font-size: 30px;
    color: red;
  }
</style>

<script>
  function ubahKelas() {
    document.getElementById("paragraf").classList.remove("normal");
    document.getElementById("paragraf").classList.add("besar");
  }
</script>

Penjelasan: Di sini kita punya dua kelas CSS—normal dan besar. Awalnya, elemen paragraf punya kelas normal, tapi saat tombol diklik, kita pake classList.remove() untuk ngapus kelas normal, dan classList.add() buat nambahin kelas besar. Hasilnya? Teks jadi lebih besar dan lebih merah!

4. Mengubah Atribut Elemen: Nambahin Power ke Elemen!

Terkadang, selain ngubah konten dan gaya, kamu juga pengen ngubah atribut elemen, seperti src di gambar, href di tautan, atau value di input. Dengan setAttribute(), kamu bisa ubah atribut-atribut itu dengan mudah!

Contoh Mengubah Atribut dengan setAttribute():

<img id="gambar" src="gambar-awal.jpg" alt="Gambar Awal">
<button onclick="ubahAtribut()">Ubah Gambar</button>

<script>
  function ubahAtribut() {
    document.getElementById("gambar").setAttribute("src", "gambar-baru.jpg");
    document.getElementById("gambar").setAttribute("alt", "Gambar Baru");
  }
</script>

Penjelasan: Kita punya gambar yang awalnya pakai src="gambar-awal.jpg", dan saat tombol diklik, kita pake setAttribute() untuk mengganti src jadi gambar-baru.jpg. Gampang banget, kan?

Kesimpulan: Kamu Jadi Pawang Website Sekarang!

Sekarang, kamu udah tahu cara mengubah konten dan gaya elemen di website dengan JavaScript! Mau ubah teks? Cukup pakai innerHTML. Mau ganti warna atau ukuran? Gunakan style. Pengen lebih fleksibel? Gunakan classList buat ngatur gaya. Atau kalau kamu pengen ubah atribut gambar, tinggal pakai setAttribute()!

Dengan keterampilan ini, kamu udah siap jadi pawang website yang bisa bikin segala sesuatunya berubah sesuai kehendak kamu. Gak ada yang gak mungkin di dunia DOM!

Jadi, kapan nih mulai ngubah tampilan website kamu? Let's make some magic happen!

 

JavaScript

Pelajari JavaScript untuk interaktivitas website.