Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?
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.
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.
Kayıtlar
Hiç yorum yok :
Yorum Gönder