Mengatur Gaya Huruf HTML Menggunakan Font Style DOM
Properti font Style DOM pada HTML digunakan untuk mengubah elemen dari properti font. Properti font dapat digunakan untuk mengubah font style, font weight, font size, dan font family.
Sintak:
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti font dari suatu elemen.
Property Values: merupakan sebuah string yang memiliki nilai seperti properti font, font size, dan font family.
Properti ini digunakan dalam urutan sebagai berikut:
Cara Penggunaan: diciptakan sebuah elemen paragraf beserta nilai ID teks. Setelah itu, diciptakan fungsi JavaScript yang berfungsi untuk mengambil sebuah nilai string dalam variabel dan mengaturnya ke teks melalui elemen ID dan properti style.font. Fungsi JavaScript yang telah diciptakan tersebut, selanjutnya dapat dipanggil menggunakan sebuah tombol, dan properti.
Contoh:
 |
| Properti Font Style DOM |
Sebelum memahami lebih dalam materi tentang Mengatur Gaya Huruf HTML Menggunakan Font Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Nilai Horizontal HTML Menggunakan cssFloat Style DOM [klik], flexWrap Style HTML DOM dan Fungsinya [klik], dan flexShrink Style HTML DOM dan Fungsinya [klik].
- digunakan untuk mengatur font style: node.style.font = "font-properties font-size font-family;"
- digunakan untuk mendapatkan font style saat ini: node.style.font;
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti font dari suatu elemen.
Properti ini digunakan dalam urutan sebagai berikut:
- font style
- font variant
- font weight
- font size
- font height
- font family
Cara Penggunaan: diciptakan sebuah elemen paragraf beserta nilai ID teks. Setelah itu, diciptakan fungsi JavaScript yang berfungsi untuk mengambil sebuah nilai string dalam variabel dan mengaturnya ke teks melalui elemen ID dan properti style.font. Fungsi JavaScript yang telah diciptakan tersebut, selanjutnya dapat dipanggil menggunakan sebuah tombol, dan properti.
Baca Juga:
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>
Properti Style font property
DOM pada HTML
</title>
</head>
<body>
<p id='text'>
Blog Elfan
</p>
<button
onclick=
"changeFont('italic 20px arial')">
Italic, Arial, 20px
</button>
<button
onclick=
"changeFont('bold 26px serif')">
Bold, Serif, 26px
</button>
<button
onclick=
"changeFont('italic bold 30px Montserrat')">
Italic, Montserrat, 20px
</button>
<button
onclick="changeFont('900 34px hack')">
Weight 900, Hack, 34px
</button>
<script type="text/javascript">
function changeFont(ff1)
{
// Mendapatkan font style.
document.getElementById(
'text').style.font = ff1;
}
</script>
</body>
</html>
Output:
Blog Elfan
Referensi Tambahan:
- 7 Value Properti fontWeight Style DOM pada HTML [klik]
- 4 Value Properti fontSizeAdjust Style DOM pada HTML [klik]
- 5 Value Properti Height Style DOM pada HTML [klik]
- 4 Value Properti Isolation Style DOM pada HTML [klik]
- 8 Value Properti justifyContent Style DOM pada HTML [klik]
- 5 Value Properti Left Style DOM pada HTML [klik]
- 4 Value Properti letterSpacing Style DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Sara Louise Immanuella Malino, Satria Yoga Prastama, Sekarwangi Zalita, Selfino Reynald Baharudin, dan Seofudin.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti font Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti font Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer/Edge
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti font Style DOM pada HTML?
BalasHapusProperti fontStyle DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan style font dengan format normal, italic, atau oblique.
HapusProperti Font Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atua mendapatkan enam properti lain dengan nama font-style, font-variant, font-weight, font-size, line-height, dan font-family.
BalasHapusFont-size dan Font-family merupakan nilai atribut yang dibutuhkan dan dapat digunakan untuk mengatur nilai default pada semua nilai yang hilang lainnya.
BalasHapus