Manipulasi Elemen HTML dan CSS dengan JavaScript

2 min readSep 5, 2023

JavaScript merupakan alat yang kuat dalam pengembangan web karena memungkinkan Anda untuk memanipulasi elemen HTML dan gaya (CSS) secara dinamis. Dalam artikel ini, kita akan menjelaskan bagaimana JavaScript digunakan untuk mengubah elemen HTML dan gaya CSS dalam halaman web untuk menciptakan pengalaman pengguna yang lebih interaktif dan menarik.

Manipulasi Elemen HTML dengan JavaScript:

Mengubah Konten Elemen: Anda dapat mengubah teks dalam elemen menggunakan properti innerHTML atau textContent.
Menambah atau Menghapus Elemen: JavaScript memungkinkan Anda menambahkan elemen baru atau menghapus elemen yang ada dalam halaman.

Contoh Manipulasi Elemen HTML:

Contoh sederhana mengubah teks pada elemen menggunakan JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Manipulasi Elemen HTML</title>
</head>
<body>
  <p id="teks">Ini adalah teks awal.</p>
  <button onclick="ubahTeks()">Ubah Teks</button>

  <script>
    function ubahTeks() {
      var elemenTeks = document.getElementById("teks");
      elemenTeks.innerHTML = "Teks telah diubah!";
    }
  </script>
</body>
</html>

Manipulasi Gaya (CSS) dengan JavaScript:

Mengubah Properti Gaya: Anda dapat mengubah properti gaya elemen, seperti warna, ukuran font, dan posisi menggunakan properti style.

Contoh Manipulasi Gaya (CSS) dengan JavaScript:

Contoh mengubah warna teks menggunakan JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Manipulasi Gaya CSS</title>
  <style>
    #teks {
      color: blue;
    }
  </style>
</head>
<body>
  <p id="teks">Ini adalah teks dengan warna awal.</p>
  <button onclick="ubahWarna()">Ubah Warna</button>

  <script>
    function ubahWarna() {
      var elemenTeks = document.getElementById("teks");
      elemenTeks.style.color = "red";
    }
  </script>
</body>
</html>

Kesimpulan:

JavaScript memungkinkan Anda untuk memanipulasi elemen HTML dan gaya (CSS) dalam halaman web, menciptakan interaktivitas yang lebih baik dan tampilan yang lebih menarik. Dengan manipulasi ini, Anda dapat mengubah konten, atribut, gaya, serta menambah atau menghapus elemen sesuai dengan kebutuhan.

Manipulasi Elemen HTML dan CSS dengan JavaScript

Written by Isshou Kusuma