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

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

Html sayfasında kullanacağımız metin alanını yazı boyutunu butonlarla bir artırıp bir eksiltmeyei yani html textarea font size button selector işlemini kodlarıyla birlikte anlatmaya ve bunu canlı bir örnekle desteklemeye çalışacağım. Script kodları 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');
  }
  
  .kmt {
   display: inline-block;
   background:white;
   margin-top:10px;
   width: 40px;
   height: 25px;
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;
   text-align:center;
   text-decoration: none;
   outline: none;
   color: #000000;
  }
    
  .baslik{
   background-color: #0068FF;
   color:white;
   height:20px;
   font-size:18px;
   font-weight:bold;
   text-align:center;
  }
 
  #Fsize{
   margin-top:10px;
   width: 40px;
   height: 25px;
  }
  #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 Artırıp Eksiltme Butonları </div>
  <div class="secim"> 
   <input class='kmt' id='kmt' onclick="MFArtı('metin',+1), fontarti();" type='button' value='A+'/></a>
   <input class='kmt' id='kmt' onclick="MFEksi('metin',-1), fonteksi();" type='button' value='A-'/></a>
   <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='13px'>13</option>
    <option value='14px'>14</option>
    <option value='15px'>15</option>
    <option value='16px'>16</option>
    <option value='17px'>17</option>
    <option value='18px'>18</option>
    <option value='19px'>19</option>
    <option value='20px'>20</option>
   </select>
  </div>
  <div class="metinalani">
   <textarea class="metin" id="metin" cols="57" style="font-size:12px; font-family: 'Montserrat', sans-serif;" rows="6">Bu Bir Font Boyutunu Artırıp Eksiltme Butonları 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>  
  <script>
  function MFArtı(kaynak,metin)
  {
   var hedef=document.getElementById(kaynak);
   var hedeffont=parseInt(hedef.style.fontSize);
   hedef.style.fontSize = (hedeffont+parseInt(metin,0)) + 'px';
  }
  </script>
  <script>
  function MFEksi(kaynak,metin){
   var hedef=document.getElementById(kaynak);
   var hedeffont=parseInt(hedef.style.fontSize);
   hedef.style.fontSize = (hedeffont+parseInt(metin,0)) + 'px';
  }
  </script>
  <script>
  function fontarti() {
   var deger = parseInt(document.getElementById('Fsize').value);
   document.getElementById('Fsize').value = deger + 1 + 'px';
  }
  </script> 
  <script>
  function fonteksi() {
   var deger = parseInt(document.getElementById('Fsize').value);
   document.getElementById('Fsize').value = deger - 1 + 'px';
  }
  </script> 
 </div>

Uygulama Canlı Örneği

Font Boyutunu Artırıp Eksiltme Butonları

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Bu Bir Font Boyutunu Artırıp Eksiltme Butonları Denemesidir