Menambah dan menghapus class dengan Javascript

Pembelajaran Javascript selanjutnya adalah penambahan class dan penghapusan class. Pembelajaran ini biasa dilakukan terutama dalam memberikan penekanan pada tampilan. Pada contoh kali ini akan membuat tampilan suasana siang dan suasana malam. Kami akan menyajikan source code CSS, source code HTML, source code Javacript dan tampilan yang dihasilkan.

Source code untuk cssnya adalah seperti berikut ini

	.siang
	{
		color: black;
		background-color: white;
	}

	.malam
	{
		color: white;
		background-color: black;
	}

	.siang, .malam
	{
		padding: 10px;
		font-size: 20px;
		border-style: solid;
		border-color: blue;
		width: 200px;		
		margin: 20px;
	}		

Source code untuk HTML adalah seperti berikut ini

<div id=”rumah”>
rumah
</div>

<button onclick=”siang()”>Siang</button> &nbsp;&nbsp; <button onclick=”malam()”>Malam</button>

Source code untuk Javascript adalah seperti berikut ini

	function siang()
	{
		rumah = document.querySelector('#rumah');
		rumah.classList.remove('malam');
		rumah.classList.add('siang');
		rumah.innerHTML = 'siang';
	}

	function malam()
	{
		rumah = document.querySelector('#rumah');
		rumah.classList.remove('siang');
		rumah.classList.add('malam');
		rumah.innerHTML = 'malam';
	}

Hasilnya dapat dilihat di https://js.aris.proweb.asia/3-8-1-add-remove-class.html dengan tampilan seperti berikut ini.
Saat diklik siang:

Saat diklik malam:

Informasi lebih lanjut silahkan mengunjungi:
1. https://www.w3schools.com/howto/howto_js_add_class.asp .
2. https://www.w3schools.com/howto/howto_js_remove_class.asp .
3. https://www.w3schools.com/tags/tag_button.asp .
4. https://www.w3schools.com/cssref/pr_border.asp .
5. https://www.w3schools.com/cssref/css_colors.asp .
6. https://www.w3schools.com/cssref/pr_background-color.asp .
7. https://www.w3schools.com/cssref/pr_padding.asp .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.