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 Gönder
Yazı Hakkındaki Düşünceleriniz...