Html Textarea Yazı Boyutunu Script ile Değiştirme

Html Textarea Yazı Boyutunu Script ile Değiştirme

Html sayfasında kullanacağımız metin alanını yazı boyutunu değiştirmeyi yani html textarea font size selector işlemini kodlarıyla birlikte anlatmaya ve bunu canlı bir örnekle desteklemeye çalışacağım. Script kodu Html kodunun içinde olacak.

Css Uygulama Kodu

  .fontsecim{
   background-color: #252525;
   width:100%;
   height:auto;
   border:5px solid #0068FF;
   text-align:center;
  }
  
  @font-face {
   font-family: 'Montserrat', sans-serif;
   @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
  }
    
  .baslik{
   background-color: #0068FF;
   color:white;
   font-size:20px;
   font-weight:bold;
   text-align:center;  
  }
 
  #Fsize{
   margin-top:10px;
   width:40px;
  }
  #metin{
   width:92%;
   height:150px;
   border:3px solid #0068FF;
   margin:10px;
   font-family: 'Montserrat', sans-serif;
   font-size:12px;
  }

Html Uygulama Kodu

 <div class="fontsecim">
 <div class="baslik"> Font Boyutunu Seçme </div>
  <div class="secim"> 
         <select id="Fsize" name="Fsize" onchange="yenilesize();">
          <option value='1px'>1</option>
          <option value='2px'>2</option>
          <option value='3px'>3</option>
          <option value='4px'>4</option>
          <option value='5px'>5</option>
          <option value='6px'>6</option>
          <option value='7px'>7</option>
          <option value='8px'>8</option>
          <option value='9px'>9</option>
          <option value='10px'>10</option>
          <option value='11px'>11</option>
          <option selected='' value='12px'>12</option>
          <option value='30px'>30</option>
          <option value='50px'>50</option>
         </select>
  </div>
  <div class="metinalani">
   <textarea class="metin" id="metin" cols="57" style="font-size:24px; font-family: 'Montserrat', sans-serif;" rows="6">Bu Bir Font Boyutu Seçimi Denemesidir</textarea>
  </div>
  <script>
  function yenilesize() {
   var selector = document.getElementById('Fsize');
   var size = selector.options[selector.selectedIndex].value;
   var txtarea = document.getElementById('metin');
   txtarea.style.fontSize = size; 
  }
 </script> 
 </div>

Uygulama Çalışan Canlı Örneği

Font Boyutunu Seçme

1 2 3 4 5 6 7 8 9 10 11 12 30 50

Bu Bir Font Boyutu Seçimi Denemesidir