Son Yazılar

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

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


Html sayfasında kullanacağımız metin alanını yaz tipini değiştirmeyi yani html textarea font family 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: 'Oswald', sans-serif;
   @import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
  }
  @font-face {
   font-family: 'Montserrat', sans-serif;
   @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
  }
  @font-face {
   font-family: 'Rajdhani', sans-serif;
   @import url('https://fonts.googleapis.com/css?family=Rajdhani&display=swap');
  }
 
  .baslik{
   background-color: #0068FF;
   color:white;
   font-size:20px;
   font-weight:bold;
   text-align:center; 
  }

  #fontse{
   margin-top:10px;
  }
  #metin{
   width:92%;
   border:3px solid #0068FF;
   margin:10px;
   font-size:16px;
  }

Html Uygulama Kodu

 <div class="fontsecim">
 <div class="baslik"> Font Seçimi </div>
  <div class="secim"> 
   <select id="fontse" name="fontse" onchange="fontgüncelleme();">
    <option> Oswald </option>
    <option> Montserrat </option>
    <option> Dosis </option>
   </select>
  </div>
  <div class="metinalani">
   <textarea id="metin" style="font-family: 'Oswald', sans-serif;" cols="57" rows="6">Bu Bir Font Seçimi Denemesidir</textarea>
  </div>
 <script>
  function fontgüncelleme() {
   var selector = document.getElementById("fontse");
   var family = selector.options[selector.selectedIndex].value;
   var metinf = document.getElementById("metin");
   metinf.style.fontFamily = family;        
  }
 </script>
 </div>


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



Font Seçimi

Yorum Yayınla

Yazı Hakkındaki Düşünceleriniz...

Daha yeni Daha eski