Cara Membuat Backgound Teks Dapat Berganti

Dengan cara mengklik tombol yang ada, maka
warna background pada teks atau tulisannya
dalam seketika akan berganti warnanya.

Sebagai contoh, coba saja Anda klik tombol
yang terdapat di bawah ini :

Dengan cara mengklik tombol yang ada, maka warna background pada teks atau tulisannya dalam seketika akan berganti warnanya.

Cara membuatnya, langkahnya adalah :
1.   Copy dahulu kode di bawah ini :

<a href="#" onclick="switchStyle();return false;" title="Change foreground/background colors"><button>Change foreground/background colors</button></a>
<div class="textDefault">
<p>Kalimat Anda letakkan di sini</p></div>

KETERANGAN :

Masukkan kode tersebut ke dalam konten HTML/JavaScript atau masukkan dalam postingan Anda.

Letakkan kalimat yang Anda inginkan
pada tempat yang disediakan.

2.   Masuk ke Edit HTML.

3.   Carilah tag </head>

4.   Copy dan paste kode berikut
      di atas tag </head> ini.

<style type="text/css">
<!--
 /* Styling common to both states (add extra styling as needed) */
.textDefault, .textAlternate {
  padding: 10px;
  width: 300px;
}
/* Styling for the default state (add extra styling as needed) */
.textDefault {
  background-color: #ffff00;
  color: #0000ff;
  border: 2px solid #0000ff;
  font-weight: normal;
}
/* Styling for the alternate state (add extra styling as needed) */
.textAlternate {
  background-color: #ff0000;
  color: #fff;
  border: 2px solid #000;
  font-weight: bold;
}
-->
</style>

<script language="JavaScript" type="text/javascript">
function switchStyle(){
  // return array of all DIV elements
  var divs = document.getElementsByTagName("DIV");
  // Iterate through all DIVs in array
  for(var i = 0; i < divs.length; i++){
    // If current DIV is using "textDefault" styling,
    // change it to use "textAlternate" styling
    if(divs[i].className == "textDefault")
      divs[i].className = "textAlternate";
    // If current DIV is using "textAlternate" styling,
    // change it back to use "textDefault" styling
    else if(divs[i].className == "textAlternate")
      divs[i].className = "textDefault";
  }
}
</script>

KETERANGAN :

Ganti ukuran background pada kode width: ....px;

Gantilah warna background, warna huruf,
ukuran dan warna bordernya dengan
yang Anda kehendaki.

Selamat mencoba, good luck!