Script untuk mengganti warna text

javascript lagi :) tulisan ini akan membahas script dasar untuk mengganti warna text, contoh scriptnya seperti ini <div class="gantitextcolor" style="background:#1589ff;

Seseorang yang optimis akan melihat adanya kesempatan dalam setiap malapetaka, sedangkan orang pesimis melihat malapetaka dalam setiap kesempatan.

javascript lagi :) tulisan ini akan membahas script dasar untuk mengganti warna text, contoh scriptnya seperti ini <div class="gantitextcolor" style="background:#1589ff;

Last Modif at July 8th, 2011

javascript lagi :) tulisan ini akan membahas script dasar untuk mengganti warna text, contoh scriptnya seperti ini

<style type="text/css">
#gantitextcolor{
/* tambahkan dan sesuaikan style disini*/
}
#gantitextcolor .gantitextcolor{
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="gantitextcolor">
<div class="gantitextcolor" style="background:#2b65ec;" onclick="document.body.style.color='#2b65ec';"></div>
<div class="gantitextcolor" style="background:#2554c7;" onclick="document.body.style.color='#2554c7';"></div>
<div class="gantitextcolor" style="background:#3bb9ff;" onclick="document.body.style.color='#3bb9ff';"></div>
<div class="gantitextcolor" style="background:#38acec;" onclick="document.body.style.color='#38acec';"></div>
<div class="gantitextcolor" style="background:#357ec7;" onclick="document.body.style.color='#357ec7';"></div>
<div class="gantitextcolor" style="background:#3090c7;" onclick="document.body.style.color='#3090c7';"></div>
<div class="gantitextcolor" style="background:#25587e;" onclick="document.body.style.color='#25587e';"></div>
<div class="gantitextcolor" style="background:#1589ff;" onclick="document.body.style.color='#1589ff';"></div>
<div class="gantitextcolor" style="background:#157dec;" onclick="document.body.style.color='#157dec';"></div>
<div class="gantitextcolor" style="background:#1569c7;" onclick="document.body.style.color='#1569c7';"></div>
<div class="gantitextcolor" style="background:#153e7e;" onclick="document.body.style.color='#153e7e';"></div>
<div class="gantitextcolor" style="background:#2b547e;" onclick="document.body.style.color='#2b547e';"></div>
<div class="gantitextcolor" style="background:#4863a0;" onclick="document.body.style.color='#4863a0';"></div>
<div class="gantitextcolor" style="background:#6960ec;" onclick="document.body.style.color='#6960ec';"></div>
<div class="gantitextcolor" style="background:#8d38c9;" onclick="document.body.style.color='#8d38c9';"></div>
<div class="gantitextcolor" style="background:#7a5dc7;" onclick="document.body.style.color='#7a5dc7';"></div>
<div class="gantitextcolor" style="background:#8467d7;" onclick="document.body.style.color='#8467d7';"></div>
<div class="gantitextcolor" style="background:#9172ec;" onclick="document.body.style.color='#9172ec';"></div>
<div class="gantitextcolor" style="background:#9e7bff;" onclick="document.body.style.color='#9e7bff';"></div>
<div class="gantitextcolor" style="background:#728fce;" onclick="document.body.style.color='#728fce';"></div>
<div class="gantitextcolor" style="background:#488ac7;" onclick="document.body.style.color='#488ac7';"></div>
<div class="gantitextcolor" style="background:#56a5ec;" onclick="document.body.style.color='#56a5ec';"></div>
<div class="gantitextcolor" style="background:#5cb3ff;" onclick="document.body.style.color='#5cb3ff';"></div>
<div class="gantitextcolor" style="background:#659ec7;" onclick="document.body.style.color='#659ec7';"></div>
<div class="gantitextcolor" style="background:#41627e;" onclick="document.body.style.color='#41627e';"></div>
<div class="gantitextcolor" style="background:#737ca1;" onclick="document.body.style.color='#737ca1';"></div>
<div class="gantitextcolor" style="background:#737ca1;" onclick="document.body.style.color='#737ca1';"></div>
<div class="gantitextcolor" style="background:#98afc7;" onclick="document.body.style.color='#98afc7';"></div>
<div class="gantitextcolor" style="background:#f6358a;" onclick="document.body.style.color='#f6358a';"></div>
<div class="gantitextcolor" style="background:#f6358a;" onclick="document.body.style.color='#f6358a';"></div>
<div class="gantitextcolor" style="background:#e4317f;" onclick="document.body.style.color='#e4317f';"></div>
<div class="gantitextcolor" style="background:#f52887;" onclick="document.body.style.color='#f52887';"></div>
<div class="gantitextcolor" style="background:#e4287c;" onclick="document.body.style.color='#e4287c';"></div>
<div class="gantitextcolor" style="background:#c12267;" onclick="document.body.style.color='#c12267';"></div>
<div class="gantitextcolor" style="background:#7d053f;" onclick="document.body.style.color='#7d053f';"></div>
<div class="gantitextcolor" style="background:#ca226b;" onclick="document.body.style.color='#ca226b';"></div>
<div class="gantitextcolor" style="background:#c12869;" onclick="document.body.style.color='#c12869';"></div>
<div class="gantitextcolor" style="background:#800517;" onclick="document.body.style.color='#800517';"></div>
<div class="gantitextcolor" style="background:#7d0541;" onclick="document.body.style.color='#7d0541';"></div>
<div class="gantitextcolor" style="background:#7d0552;" onclick="document.body.style.color='#7d0552';"></div>
<div class="gantitextcolor" style="background:#810541;" onclick="document.body.style.color='#810541';"></div>
<div class="gantitextcolor" style="background:#c12283;" onclick="document.body.style.color='#c12283';"></div>
<div class="gantitextcolor" style="background:#e3319d;" onclick="document.body.style.color='#e3319d';"></div>
<div class="gantitextcolor" style="background:#f535aa;" onclick="document.body.style.color='#f535aa';"></div>
<div class="gantitextcolor" style="background:#ff00ff;" onclick="document.body.style.color='#ff00ff';"></div>
<div class="gantitextcolor" style="background:#f433ff;" onclick="document.body.style.color='#f433ff';"></div>
<div class="gantitextcolor" style="background:#e238ec;" onclick="document.body.style.color='#e238ec';"></div>
<div class="gantitextcolor" style="background:#c031c7;" onclick="document.body.style.color='#c031c7';"></div>
<div class="gantitextcolor" style="background:#b048b5;" onclick="document.body.style.color='#b048b5';"></div>
<div class="gantitextcolor" style="background:#d462ff;" onclick="document.body.style.color='#d462ff';"></div>
<div style="clear:both"></div>
<p style="font-size:30px;">ini adalah text</p>
</div>

cara menjalankan script

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

keterangan

script diatas berfungsi untuk mengganti warna tag body termaksud border, silakan manfaatkan sesuai kebutuhan.

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

document.getElementById ("namaid").style.color="#00ff00";

contoh

<script type="text/javascript">
function gantitextcolor()
{
document.getElementById ("gantitextcolor").style.color="#00ff00";
//cara kerja fungsi ini adalah mangganti warna atribut id menjadi #00ff00/lime
}
</script>
<div id="gantitextcolor" style="">
<p style="font-size:20px;">ini adalah text</p>
</div>
<div onclick="gantitextcolor()" style="width:200px;height:20px;display:block;cursor:pointer;">klik disini untuk ganti warna </div>

semoga pemahaman dasar ini sedikit bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

6 thoughts on “Script untuk mengganti warna text”

  1. ini lah soal juga suka ko begini bagus ya tapi ya ijin coba juga ya soal ya menarik ini tutor ya bagus

  2. aldy says:

    Ndak bisa ikutan gonta ganti warna bro, bikin yang standar saja sudah jungkir balik.

  3. indam says:

    Aldy,
    saya juga gitu gan, masih kewalahan(kesulitan) masih banyak fungsi-fungsi yang saya belum pahami :)

  4. Jadilah tutor saya, he he he

    ich, sama dengan om aldy yg standard aja aku susah apalagi yg gini2 huft1

  5. Dilla says:

    mas, mau tanya..
    klo scriptnya untuk ganti warna di textfield gmn ya?

    CONTOH :
    saat awal textnya berwarna hitam, tapi saat textfieldnya di klik dan di isi, warna textnya berubah jadi warna merah..

    itu gmn ya?
    tolong dongg.. :) :) :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-