JavaScript ile metin boyutu nasıl değiştirilir

Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?

Javascript başlangıç seviyesi çalışmalarımıza devam ediyoruz. Bu sefer web sayfasındaki bir metnin boyutunu JavaScript ile değiştireceğiz. Normalde bir web sayfası kodlarken metin boyutlarını CSS kodları ile düzenleriz. "font-size:" kodunu kullanarak istediğimiz yazıya, istediğimiz boyutu, piksel,yüzde(%), em vs cinsinden verebiliriz.

Javascript basit kodlarla bir metne font-size vermeye ya da font-size'ı değiştirmeye izin verir. Peki CSS kullanarak bu işi yapmak varken neden Javascript kodu yazalım ki?

Aslına bakarsanız CSS ile yapabileceğiniz işleri CSS ile yapmak daha mantıklı. Zaten genelde de yapılan budur. Ancak sayfada bazı olaylar olduğunda(tıklama, yüklenme, fare ile bir nesnenin üzerine gelme gibi). görüntüde değişiklikler yapmak isteyebilirsiniz.

JavaScript işte bu durumlarda bir FrontEnd Developer'ın imdadına yetişiyor. Birkaç satır kod yazarak sayfada istediğiniz manipülasyonu yapabilirsiniz. Nasıl olduğun görmek için aşağıdaki butonu bir deneyin derim.

JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!

Javascript kounu mu merak ettiniz? İşte size kodlar!

<!DOCTYPE html>
<html>
<head>
<title>Javasctipy İle Bir Yazının Boyutunu Değiştirmek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
</title>
<body>

<h3>Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?</h3>

<button type="button" onclick="document.getElementById('yazi').style.fontSize='35px'">Font size değiştir!</button>
<button onclick="document.getElementById('yazi').style.fontSize='14px'" type="button">Font size'ı eski haline getir!</button>

<p id="yazi" style="font-size:14px;">JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!</p>

</body>
</html>

Burada butona tıklandığında (onclick) tarayıcı id'si yazi olan nesnenin font-size'ını değiştirir. Bu işlemi yapan minik Javascript kodu şöyle:

document.getElementById('yazi').style.fontSize='35px'

Bu kodun çalışma adımları:

document.getElementById('yazi') : id değeri yazi olan elemanı bul
style : bu elemanın style nesnesine ulaş
fontSize: style nesnesinin bir özelliği olan fontSize'ı uygula ve buna karşısındaki değeri ekle

Hepsi bu kadar.

Front-End Goods

Sayfalar

4 Ağustos 2016 Perşembe