JavaScript Range Kullanarak Yazı Boyutu Değiştirme

Bu örnekte Html sayfasında bulunan bir yazının FontSize özelliğini <input range..> kullanarak değiştireceğiz.

Örneğimizin bitmiş hali aşağıdaki gibi olacaktır. Range değerini değiştirerek canlı görebilirsiniz.

JavaScript

JavaScript Kodları:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <input type="range" min="1" max="100" id="rFont" value="12">
    <div id="kutu">JavaScript</div>
    
    <script>
        rFont.oninput=function(){
            document.getElementById("kutu").style.fontSize=rFont.value+"px";
        }
    </script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<div id="kutu">JavaScript</div>

rFont.oninput=function(){

document.getElementById("kutu").style.fontSize=rFont.value+"px";

}

</script>

</body>

</html>

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X