Özel renk kodunu (#ff0000) tanımlı renk adı(yesil) kullanarak nesnelere vermek için hazırlanmış bir örnektir.
Öncelikle hangi renk nesne olarak tanımlanacaksa aşağıdaki gibi bir nesne listesi içine yerleştiriyoruz.
|
1 2 3 4 5 6 7 8 9 |
const renkler={ yesil:'#2ecc71', kirmizi:'#e74c3c', gri:'#ecf0f1', siyah:'black', beyaz:'white' }; |
Şimdi yukarıdaki nesneyi kullanacak HTML etiketleri için gerekli nesneleri oluşturalım.
|
1 2 3 4 5 |
const dBtn = document.getElementById('degistir'); //button etiketi const renkKodu = document.getElementById('renkKodu'); //input etiketi const yaziRenk = document.getElementById('yaziRenk'); //p yada her hangi bir metin etiketi |
Yukarıdaki gibi nesneleri oluşturduktan sonra butona tıkladığımızda işlemin gerçekleşmesi için aşağıdaki gibi tıklama olayını hazırlayalım.
|
1 2 3 4 5 |
dBtn.addEventListener('click', () => { yaziRenk.style.color = renkler[renkKodu.value]; } ); |
Son olarak da bu işlemin gerçekleşmesi için HTML nesnelerini yerleştirmeye geldi.
|
1 2 3 4 5 |
<button id="degistir">Renk Değiştirmek İçin Tıklayın</button> <input type="text" id="renkKodu" placeholder="Renk Girin Örn:yesil"> <p id="yaziRenk">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p> |
Örneğin tamamlanmış hali: Kodları toplaryacak olursa aşağıdaki gibi kodlar şekillenmiş olacaktır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript Örnek</title> <style> @import 'https://fonts.googleapis.com/css?family=Lato:400,700'; body { color: #2a1f1f; font-family: 'Lato', sans-serif; padding: .45em 2.65em 3em; line-height: 1.5; } </style> </head> <body> <button id="degistir">Renk Değiştirmek İçin Tıklayın</button> <input type="text" id="renkKodu" placeholder="Renk Girin Örn:yesil"> <p id="yaziRenk">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p> <script type="text/javascript"> const renkler={ yesil:'#2ecc71', kirmizi:'#e74c3c', gri:'#ecf0f1', siyah:'black', beyaz:'white' }; const dBtn = document.getElementById('degistir'); const renkKodu = document.getElementById('renkKodu'); const yaziRenk = document.getElementById('yaziRenk'); dBtn.addEventListener('click', () => { yaziRenk.style.color = renkler[renkKodu.value]; } ); </script> </body> </html> |
