Javascript İle CSS Değiştirme

Herkese merhabalar, Javascript derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde Javascript ile HTML nesnesinin CSS özelliğini değiştirmeyi anlatacağım. Hadi başlayalım !

Javascript bildiğiniz üzere bir betik dili ve istemci yani tarayıcı üzerinde çalışıyor ve hem HTML hemde CSS müdahale ve manipülasyonu yapabiliyoruz. HTML müdahalesi yapmayı diğer yazılarımızda anlattık/anlatıyoruz. Bu yazımızda CSS müdahalesi yapmayı anlatacağım. CSS müdahalesi yapabilmek için öncelikle müdahale yapacağımız HTML nesnesini seçmemiz gerekiyor. Çünkü CSS doğrudan yazılabilen bir dil değil, HTML nesnelerinin özelliğini değiştirmek için HTML ile beraber yazılıyor. Bu yüzden öncelikle HTML nesnesini seçeceğiz, sonrasında CSS özelliğini değiştireceğiz. Javascript ile HTML nesnesini seçmenin birden çok yolu var. Örneğin id değeri unique yani her nesne için farklı olduğundan document.getElementById() fonksiyonuyla id değerine göre seçebiliriz. Yada document.getElementsByClassName() fonksiyonu ile class özelliğine göre seçim yapabiliriz yada document.querySelector() ve document.querySelectorAll() fonksiyonlarıyla CSS özelliklerine göre seçim yapabiliriz. Örneğin ben id değerine seçim yapacağım ve bunun üzerinden gideceğim.

HTML nesnemizi seçtikten sonra CSS özelliklerini değiştirmek için kullanılan style özelliğine geçiş yapacağız ve bu özellik üzerinden gideceğiz. Bundan sonra tıpkı CSS özellikleri vermek gibi olacaktır fakat iki parçalı CSS özelliklerinde camel-case yazım şeklini kullanacağız ve değiştirmek istediğimiz özelliğe aralarında = (eşittir işareti) koyarak değer ataması yapacağız. Yani örneğin border vermek istiyorsanız html_seçici.style.border = ‘border_değeri’ şeklinde kullanım yapıyorken, font-size özelliğini değiştirmek istiyorsakta html_seçici.style.fontSize = ‘font_size_değeri’ şeklinde kullanım yapılıyor. Örneğin bir tane buton ekleyelim ve bu butona tıklanınca genişliği 100px, yüksekliği 100px, arkaplan rengi sarı olan ve içerisinde SoftwareSup.Net yazan bir div nesnesinin arkaplan rengini kırmızı, genişliğini 500px, yüksekliğini 200px yapalım ve ayrıca SoftwareSup.Net yazısını da div nesnesinin tam ortasına getirelim. Son olarak SoftwareSup.Net yazısının rengini beyaz ve yazı boyutunuda 25px yapalım. Öncelikle HTML olarak bi tasarımımızı yapalım.

<input type="button" id="degistir" value="Değiştir">
<div id="kutu" style="width:100px;height:100px;background-color:yellow;">SoftwareSup.Net</div>

Şimdi de sıra geldi Javascript tarafına. Az öncede dediğim gibi öncelikle div nesnemizi Javascript ile seçeceğiz ve bu nesnenin style özelliğine geçiş yapıp sonrasında gerekli olan CSS özelliklerini vereceğiz. Tabi tüm bunların yapılabilmesi için butona tıklanması gerekiyor, ki bunuda butonun click eventini yakalayarak yapacağız. Fazla uzatmadan kodumuzu yazalım.

document.getElementById('degistir').onclick = function () {
    document.getElementById('kutu').style.width = '500px';
    document.getElementById('kutu').style.height = '200px';
    document.getElementById('kutu').style.backgroundColor = 'red';
    document.getElementById('kutu').style.textAlign = 'center';
    document.getElementById('kutu').style.color = 'white';
}

Evet bu kodları bir tane HTML dosyasına (.html uzantılı bir dosyaya) yazıp tarayıcı üzerinden açarsanız öncelikle sarı bir kare ve bu karenin sol üstünde SoftwareSup.Net yazdığını göreceksiniz. Butona tıkladığınızda ise ince uzun bir dikdörtgen ve üst ortasında beyaz renkli SoftwareSup yazacaktır.

Bu dersimizde buraya kadardı. Tüm Javascript yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.