Javascript Yazı Boyutu Değiştirme

Herkese merhabalar, Javascript derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde Javascript ile yazı boyutunu değiştirmeyi anlatacağım. Hadi başlayalım !

Yazı boyutu değiştirme derken elbette HTML tarafında olan span, p, div gibi içerisinde yazı yazılabilen herhangi bir etiketin içeriğindeki yazının boyutunu değiştireceğiz. Çünkü Javascript ile doğrudan herhangi bir yere yazı yazamıyoruz fakat HTML ile oluşturulmuş etiketlere müdahale edebiliyoruz. Bu yazımda ben bir tane range tipinde bir input ile değiştireceğim. Yani range’in değeri ne olursa yazının boyutuda o olacak. Range, minimum ve maksimum noktaları olup kullanıcının bu aralıkta seçim yapmasını sağlayan güzel bir HTML elementi. Tabi ben range ile yapıcam fakat siz isterseniz bir tane text tipinde input koyup içerisine yazı boyutunun girilmesini sağlar ve butona tıklayınca yazının boyutu girilen değer kadar olmasını sağlayabilirsiniz. Aslında bende bu ikisini yapayım madem 🙂

Öncelikle range ile yapalım ve range’den seçim yapıldığı anda (range değeri SoftwareSup.Net yazısının boyutunu değiştirelim. Tabi önce HTML tarafını yapalım.

<input type="range" min="1" max="100" id="degistir" value="12" />
<br>
<span id="yazi">SoftwareSup.Net</span>

Şimdide geçelim Javascript tarafına. Burada da öncelikle range tipindeki inputu seçip, değerinin değişmesinde tetiklenen eventi yakalayıp sonrasında bu değeri span’ın font-size özelliğine atamamız gerekecek. Bu işlemi de span nesnesinin CSS özelliğini değiştirerek yapacağız. Peki Javascript ile bir HTML nesnesinin CSS özelliği nasıl değiştirilir diye soracak olursanız sizi şu yazımıza bekliyoruz.

Teoride nasıl yapacağımızı anlattım, şimdi sıra kodunu yazmaya geldi.

document.getElementById('degistir').oninput = function () {
    document.getElementById('yazi').style.fontSize = this.value + 'px';
};

Range ile yazı boyutunu değiştirdik, şimdide bir tane yazı boyutunun girilebilmesi için number tipinde input ve yazı boyutunun değiştirilebilmesi içinde bir tane buton ekleyelim. Number tipindeki input içine yazı boyutu yazılacak ve butona tıklandığında da yazılan değer yazının boyutu olacak. HTML tarafını yapalım hemen;

<input type="number" id="boyut" />

Javascript ile yazı boyutunu değiştirmek için font-size CSS özelliğine atama yapacağız. Biraz karışık anlatmış olabilirim ama kodunu görünce ne kadar kolay olduğunu göreceksiniz.

document.getElementById('degistir').onclick = function () {
    document.getElementById('yazi').style.fontSize = document.getElementById('boyut').value + 'px';
}

Bu kodları bir tane HTML dosyasına (.html uzantılı bir dosyaya) yazıp tarayıcı üzerinden açarsanız her iki örneğimizinde sorunsuz bir şekilde çalıştığını göreceksiniz. Vee bu yazımızda burada sonlandı.

Tüm Javascript derslerimize buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.