Bu yazımızda javascript kullanarak web tasarım uygulamalarımızda stil özelliklerine nasıl müdahale edebileceğimizi ve nerede kullanabileceğimize dair küçük bir örnek yapacağız.
Hedefimiz, bir alanın arkaplan renginin, yazı rengini ve font boyutunun seçimini kullanıcıya bırakmak... Yaptığı seçimlerle bu değerleri kendi belirleyecek.
Bu tip uygulama, çok renk seçenekli web tasarım şablonları oluşturduğunuzda, kullanıcınızın beğendiğini seçmesini istediğiniz durumlar için idealdir. Tabii konuyu daha da ileri götürüp, colorChooser (renk seçici), font seçici ve buna benzer uygulamaları kullanıcınıza sunup, kendi web tasarımını kendisinin yaratmasını ve size sadece değerleri göndermesini sağlayabilirsiniz.
Burada çok basit anlamda, bir seçim menüsü hazırlayıp, seçime göre renk ve font değişimimizi yapacağız
Uygulama:
Bu yazının font ve renk değeri değişecek...
Bu uygulamamızda, seçimleri sadece bir alan için yaptık ama bunu web tasarım uygulamanızın tüm arkaplanı için de yapabilirsiniz.
Kısaca yaptığımız işi açıklayalım:
CSS yapısı:
#area_product{
position:relative;
width:600px;
height:200px;
border-bottom:1px solid green;
border:1px solid green;
margin-bottom:20px;
padding:5px;
clear:both;
}
HTML yapısı:
<div id="area_product" style="position:relative; width:600px; height:200px; border-bottom:1px solid green;border:1px solid green;margin-bottom:5px;">
<p id="changeColor">Bu yazının font ve renk değeri değişecek...</p>
</div>
<select name="themes" onChange="changeColor(this.value);">
<option value="white:black:12" selected="selected">ArkaPlan, Yazı Rengi, Font Boyutu Seçiniz...</option>
<option value="black:white:16">Siyah Beyaz 16</option>
<option value="green:blue:24">Yeşil Mavi 24</option>
<option value="orange:white:14">Turuncu Beyaz 14</option>
</select>
Bir alanımız, içinde bir yazı ve bir adet dropdown menümüz var, seçim yapılınca "onchange" olayıyla (event) "changeColor(this.value)" fonsiyonu çağrılıyor, parametre olarak da ":" ile ayrılmış tek bir değer gönderiyor, ama aslında bu değerler bizim arkaplan, font rengi ve font boyutumuzu ileten 3 değer.
Şimdi gelelim javascript kodlarımıza...
changeColor(colorValues) fonksiyonu:
<script type="text/javascript">
function changeColor(colorValues){
objectValues=colorValues.split(":");
selBgColor=objectValues[0];
selFgColor=objectValues[1];
selFontSize=objectValues[2];
document.getElementById('area_product').style.backgroundColor=selBgColor;
document.getElementById('changeColor').style.color=selFgColor;
document.getElementById('changeColor').style.fontSize=selFontSize+"px";
}
</script>
Açıklamalar:
- 2. Gelen değerimizi split metoduyla ":" işaretine göre parçalıyoruz, objectValue artık bu değerleri içeren bir dizi oluyor,
- 3.,4.,5. objectValue dizisinin verilerini, sırayla arkaplan rengi, font rengi ve font boyutu olarak diğer değişkenlere atıyoruz,
- 7.,8.,9. Burada da area, changeColor ID'li nesnelerimizin stil özelliklerini değiştiriyoruz
Bu yazımızda, javascript kullanarak web tasarım uygulamalarımızda, stil, css özelliklerine nasıl müdahale edebileceğimize kısaca değindik.
Hepsi bu, kolay gelsin, görüşmek üzere...
