Cara Merubah Warna Background Body dengan Bantuan Javascript
Memberikan warna di sebuah tampilan blog, memang hal yang wajib, jadi sekiranya kita tak ada warna blog kita akan tampil hitam putih seperti tampilan televisi jaman dahulu, sungguh amat tak cantik ya, dan tak sarankan, dan biasanya kita kita memberikan warna di backgroundnya, itu pasti hal yang sering di style pertama-tama dikala merancang blog, body backgroundnya apa pasti itu, biasanya kita merancang warna di background gambar dengan satu style saja, bagaimana sekiranya cara merubah warna background body dengan bantuan Javascript, iya betul dengan javascript kita dapat mengubah-ubahnya tanpa perlu menstyle ulang CSSnya, oke jangan kemana-mana simak terus ya
Oke dengan sedikit bantuan dari javascript kita dapat mengatur acak warna di background body, sebetulnya tak hanya body ya, tapi kita pun dapat menggunakan di tag-tag yang lain tapi kebetulan disini saya akan mencobanya dengan tag body, supaya terlihat jelas efeknya dan memang tag body sering di style warnannya, oke yang mesti teman-teman persiapkan bagi cara merubah warna background body dengan bantuan Javascript, ialah:
- saya merancang fitur tombol dengan tag button, dimana tombol ini ialah bagi mengeksekusi ketika di klik tombolnya, warna background di body akan berubah.
var btn = document.querySelector('button');- berikutnya saya merancang function bagi menampung random waran ketika kita klik, jadi ketika kita klik warnanya itu akan terpilih secara acak ya teman-teman.
function random(number) {
return Math.floor(Math.random()*(number+1));
}- berikutnya, saya merancang tombol itu berfungsi dengan javascript, dengan even onclick seperti ini, lalu kita panggil bodynya lalu kita style :
btn.onclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}Oke dan ini struktur komplit tampilan dan Javascriptnya:
<!DOCTYPE html>
<html>
<head>
<title>cara merubah warna background body dengan bantuan Javascript</title>
<-e-style type=text/css>
.container{
width: 500px;
margin: auto;
background: #F3F3F3;
box-shadow: 5px 5px 5px 5px #555;
text-align: center;
}
.container_2{
width: 60px;
margin: auto;
}
button{
margin: 10px
}
</style>
</head>
<body>
<div class=container>
<h1>cara merubah warna background body dengan bantuan Javascript</h1>
<h3><u>Ketidakhadiran Mahasiswa</u></h3>
<button>Change color</button>
</div>
</div>
<-e-script type=text/javascript>
var btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random()*(number+1));
}
btn.onclick = function() {
var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
</script>
</body>
</html>
seperti begitulah strukutur yang telah saya gunakan ya, disni saya mengambil refrensi dari mozila developers, oke bagaimana hasilnya seperti inilah hasilnya:
Tampilan dimana saya belum mengklik change colors
ketika saya klik dan saya klik dan seterusnya warna di background gambar akan berubah-ubah, dengan warna yang berbeda-beda, oke saya rasa lumayan hingga disini belajar kita mengenai cara merubah warna background body dengan bantuan Javascript, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
