Script untuk mengganti warna Background

fungsi script ini untuk merubah warna background tag body html, script ini bagian paling dasar dari dinamic html, berikut scriptnya

<style type="text/css">
#gantibg{
/* tambahkan dan sesuaikan style disini*/
}
#gantibg .gantibg{
display:inline;
width:25px;
height:25px;
cursor:pointer;
float:left;
margin:2px 2px 0 0;
-moz-border-radius:3px;
border-radius:3px;
}
</style>
<div id="gantibg">
<div class="gantibg" style="background:#2b65ec;" onclick="document.body.style.backgroundColor='#2b65ec';"></div>
<div class="gantibg" style="background:#2554c7;" onclick="document.body.style.backgroundColor='#2554c7';"></div>
<div class="gantibg" style="background:#3bb9ff;" onclick="document.body.style.backgroundColor='#3bb9ff';"></div>
<div class="gantibg" style="background:#38acec;" onclick="document.body.style.backgroundColor='#38acec';"></div>
<div class="gantibg" style="background:#357ec7;" onclick="document.body.style.backgroundColor='#357ec7';"></div>
<div class="gantibg" style="background:#3090c7;" onclick="document.body.style.backgroundColor='#3090c7';"></div>
<div class="gantibg" style="background:#25587e;" onclick="document.body.style.backgroundColor='#25587e';"></div>
<div class="gantibg" style="background:#1589ff;" onclick="document.body.style.backgroundColor='#1589ff';"></div>
<div class="gantibg" style="background:#157dec;" onclick="document.body.style.backgroundColor='#157dec';"></div>
<div class="gantibg" style="background:#1569c7;" onclick="document.body.style.backgroundColor='#1569c7';"></div>
<div class="gantibg" style="background:#153e7e;" onclick="document.body.style.backgroundColor='#153e7e';"></div>
<div class="gantibg" style="background:#2b547e;" onclick="document.body.style.backgroundColor='#2b547e';"></div>
<div class="gantibg" style="background:#4863a0;" onclick="document.body.style.backgroundColor='#4863a0';"></div>
<div class="gantibg" style="background:#6960ec;" onclick="document.body.style.backgroundColor='#6960ec';"></div>
<div class="gantibg" style="background:#8d38c9;" onclick="document.body.style.backgroundColor='#8d38c9';"></div>
<div class="gantibg" style="background:#7a5dc7;" onclick="document.body.style.backgroundColor='#7a5dc7';"></div>
<div class="gantibg" style="background:#8467d7;" onclick="document.body.style.backgroundColor='#8467d7';"></div>
<div class="gantibg" style="background:#9172ec;" onclick="document.body.style.backgroundColor='#9172ec';"></div>
<div class="gantibg" style="background:#9e7bff;" onclick="document.body.style.backgroundColor='#9e7bff';"></div>
<div class="gantibg" style="background:#728fce;" onclick="document.body.style.backgroundColor='#728fce';"></div>
<div class="gantibg" style="background:#488ac7;" onclick="document.body.style.backgroundColor='#488ac7';"></div>
<div class="gantibg" style="background:#56a5ec;" onclick="document.body.style.backgroundColor='#56a5ec';"></div>
<div class="gantibg" style="background:#5cb3ff;" onclick="document.body.style.backgroundColor='#5cb3ff';"></div>
<div class="gantibg" style="background:#659ec7;" onclick="document.body.style.backgroundColor='#659ec7';"></div>
<div class="gantibg" style="background:#41627e;" onclick="document.body.style.backgroundColor='#41627e';"></div>
<div class="gantibg" style="background:#737ca1;" onclick="document.body.style.backgroundColor='#737ca1';"></div>
<div class="gantibg" style="background:#737ca1;" onclick="document.body.style.backgroundColor='#737ca1';"></div>
<div class="gantibg" style="background:#98afc7;" onclick="document.body.style.backgroundColor='#98afc7';"></div>
<div class="gantibg" style="background:#f6358a;" onclick="document.body.style.backgroundColor='#f6358a';"></div>
<div class="gantibg" style="background:#f6358a;" onclick="document.body.style.backgroundColor='#f6358a';"></div>
<div class="gantibg" style="background:#e4317f;" onclick="document.body.style.backgroundColor='#e4317f';"></div>
<div class="gantibg" style="background:#f52887;" onclick="document.body.style.backgroundColor='#f52887';"></div>
<div class="gantibg" style="background:#e4287c;" onclick="document.body.style.backgroundColor='#e4287c';"></div>
<div class="gantibg" style="background:#c12267;" onclick="document.body.style.backgroundColor='#c12267';"></div>
<div class="gantibg" style="background:#7d053f;" onclick="document.body.style.backgroundColor='#7d053f';"></div>
<div class="gantibg" style="background:#ca226b;" onclick="document.body.style.backgroundColor='#ca226b';"></div>
<div class="gantibg" style="background:#c12869;" onclick="document.body.style.backgroundColor='#c12869';"></div>
<div class="gantibg" style="background:#800517;" onclick="document.body.style.backgroundColor='#800517';"></div>
<div class="gantibg" style="background:#7d0541;" onclick="document.body.style.backgroundColor='#7d0541';"></div>
<div class="gantibg" style="background:#7d0552;" onclick="document.body.style.backgroundColor='#7d0552';"></div>
<div class="gantibg" style="background:#810541;" onclick="document.body.style.backgroundColor='#810541';"></div>
<div class="gantibg" style="background:#c12283;" onclick="document.body.style.backgroundColor='#c12283';"></div>
<div class="gantibg" style="background:#e3319d;" onclick="document.body.style.backgroundColor='#e3319d';"></div>
<div class="gantibg" style="background:#f535aa;" onclick="document.body.style.backgroundColor='#f535aa';"></div>
<div class="gantibg" style="background:#ff00ff;" onclick="document.body.style.backgroundColor='#ff00ff';"></div>
<div class="gantibg" style="background:#f433ff;" onclick="document.body.style.backgroundColor='#f433ff';"></div>
<div class="gantibg" style="background:#e238ec;" onclick="document.body.style.backgroundColor='#e238ec';"></div>
<div class="gantibg" style="background:#c031c7;" onclick="document.body.style.backgroundColor='#c031c7';"></div>
<div class="gantibg" style="background:#b048b5;" onclick="document.body.style.backgroundColor='#b048b5';"></div>
<div class="gantibg" style="background:#d462ff;" onclick="document.body.style.backgroundColor='#d462ff';"></div>
<div style="clear:both"></div>
</div>

cara menjalankan script

• buka program notepad
• masukan script dan markup diatas
• lalu save as dengan nama dan ekstensi gantibg.htm
• jalankan gantibg.htm

keterangan

script diatas hanya untuk mengganti warna latar tag body, silakan manfaatkan sesuai kebutuhan.

agan juga dapat membuat script untuk ganti background pada id tertentu, buat javascripnya dengan syntax seperti ini

document.getElementById ("namaid").style.backgroundColor="#000000";

contoh

<script type="text/javascript">
function gantibgid()
{
document.getElementById ("gantibg").style.backgroundColor="#000000";
//cara kerja fungsi ini adalah mangganti warna latar belakang atribut id gantibg menjadi #000000/black
}
</script>
<div id="gantibg" style="width:200px;background:lime;height:400px;display:block;">
</div>
<div onclick="gantibgid()" style="color:#00ff00;width:200px;background:black;
height:20px;display:block;cursor:pointer;">klik disini untuk ganti bg </div>

semoga pemahaman dasar ini sedikit bermanfaat