Cara Manipulasi CSS dengan Javascript

28/04/2020 Maykhel David 5200 Website

Memanipulasi CSS dengan JavaScript - Pada artikel ini kita akan melihat dasar-dasar cara memanipulasi gaya CSS menggunakan JavaScript. JavaScript adalah bahasa pemrograman . JavaScript banyak digunakan untuk menyediakan interaktivitas di situs web dan aplikasi. JavaScript dapat berinteraksi dengan stylesheet, memungkinkan Anda untuk menulis program yang mengubah gaya dokumen secara dinamis.

Ada tiga cara untuk melakukan manipulasi css dengan javascript:

-   Javascript bekerja dengan memanfaatkan selector yang ada di css, contoh: menambah class dan menghapus class
-   Javascript bekerja dengan aturan yang ada pada selector yang ada di css, contoh: menambah property style dan menghapus property style
-   Javascript bekerja secara sendiri baik membuat style baru ataupun mengubahnya tanpa terikat file css lain.

Contoh Manipulasi CSS dengan Javascript

1. Buat dokumen HTML baru doc5.html,. salin kode berikut dan letakan pada file doc5.html

<!DOCTYPE html>
<html>

<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="script5.js"></script>
</head>

<body>
<h1>JavaScript sample</h1>

<div id="square"></div>

<button type="button" id="clickMe">Click Me</button>

</body>
</html>

2. Buat file CSS baru style5.css,. Salin kode dari sini:

#square {
width: 20em;
height: 20em;
border: 2px inset gray;
margin-bottom: 1em;
}

button {
padding: .5em 2em;
}

3. Buat file teks baru script5.js,. Salin kode dari sini:

var square = document.getElementById("square"),
clickMe = document.getElementById('clickMe'); //Keeping it unobstrusive
function doDemo () {

var button = this;
square.style.backgroundColor = "#fa4";
button.setAttribute("disabled", "true");
setTimeout(clearDemo, 2000, button);
}

function clearDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}

clickMe.onclick = doDemo;

Buka file di browser dan tekan tombol.

Apa isi dari kode diatas? Kode diatas adalah penerapan javascript yang dapat mengubah warna background id #squareke menjadi #ffaa44.
Baiklah, dengan demikian artikel kali ini yang membahas tentang cara manipulasi css dengan javascript sudah cukup jelas, selanjutnya kalian bisa mencoba sendiri misal dengan mengubah beberapa elemen sekaligus atau yang lainnya.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More