Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Ukuran Huruf HTMl Menggunakan fontSize Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti fontSize Style DOM pada HTML digunakan untuk mengatur atau mendapatkan nilai ukuran font dari karakter dalam sebuah kata yang harus dimunculkan.

Sebelum memahami lebih dalam materi tentang Mengatur Ukuran Huruf HTMl Menggunakan fontSize Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Jenis Huruf HTML Menggunakan fontFamily Style DOM, Mengatur Gaya Huruf HTML Menggunakan Font Style DOM, dan Mengatur Nilai Horizontal HTML Menggunakan cssFloat Style DOM.

Sintak:
  • berfungsi untuk mengembalikan nilai properti fontSize: object.style.fontSize
  • berfungsi untuk mengatur nilai properti fontSize: object.style.fontSize = "value|initial|inherit"

Property Values:
  • xx-small: digunakan untuk mendefinisikan ukuran font.
  • x-small: digunakan untuk mendefinisikan ukuran font.
  • small: digunakan untuk mendefinisikan ukuran font.
  • medium: digunakan untuk mendefinisikan ukuran font.
  • large: digunakan untuk mendefinisikan ukuran font.
  • x-large: digunakan untuk mendefinisikan ukuran font.
  • xx-large: digunakan untuk mendefinisikan ukuran font.
  • smaller: mengurangi ukuran huruf dari ukuran font relatifnya.
  • larger: menambah ukuran huruf dari ukuran font relatifnya.
  • length: mengambah ukuran huruf dalan satuan ukur length.
  • %: nilai persen font size dari elemen parent.
  • initial: digunakan untuk mengatur nilai default.
  • inherit: digunakan untuk menerima nilai turunan properti dari elemen parent-nya.

Return Values: berfungsi untuk mengembalikan nilai font size dari elemen teks.

Baca Juga:

Contoh: mengubah ukuran huruf menjadi small.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontSize DOM 

HTML

</title>

</head>

 

<body>

<center>

 

<p 

style="color: green;

width: 100%;

font-size: 30px;

font-weight: bold;"

id="Bons1">

Blog Elfan

</p>

 

<h2>

Properti Style fontSize DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBonss()">

Click to change

</button>

 

<script>

function myBonss() 

{

// Mengubah ukuran font 

// menjadil small.

document.getElementById(

"Bons1").style.fontSize = "small";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontSize DOM




Contoh: mengubah ukuran huruf menjadi xx-large.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontSize DOM HTML

</title>

</head>

 

<body>

<center>

 

<p 

style="color: green;

width: 100%;

font-size: 10px;

font-weight: bold;"

id="Bon1">

Blog Elfan

</p>

 

<h2>

Properti Style fontSize DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBons()">

Click to change

</button>

 

<script>

function myBons() 

{

// Mengubah ukuran font menjadi xx-large.

document.getElementById(

"Bon1").style.fontSize = "xx-large";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontSize DOM




Contoh: mengubah ukuran huruf menjadi satuan ukur length.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontSize DOM

</title>

</head>

 

<body>

<center>

 

<p 

style="color: green;

width: 100%;

font-size: 10px;

font-weight: bold;"

id="Bon1">

Blog Elfan

</p>

 

<h2>

Properti Style fontSize DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBons()">

Click to change

</button>

 

<script>

function myBons() 

{

// Mengubah ukuran font dari 

// 10px menjadi 30px.

document.getElementById(

"Bon1").style.fontSize = "30px";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontSize DOM




Contoh: mengubah ukuran font menggunakan satuan '%'.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontSize DOM

</title>

</head>

 

<body>

<center>

 

<p 

style="color: green;

width: 100%;

font-size: 10px;

font-weight: bold;"

id="Bon1">

Blog Elfan

</p>

 

<h2>

Properti Style fontSize DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBons()">

Click to change

</button>

 

<script>

function myBons() 

{

// Mengubah ukuran font dari 

// 100% menjadi 200%

document.getElementById(

"Bon1").style.fontSize = "200%";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontSize DOM



Artikel ini didedikasikan kepada: Alila Kanayadiba, Alvina Nur A'Isyah, Alya Fitriana Rosita, Amnatulaina Harissaputri, dan Anindya Dian Putriani.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Ukuran Huruf HTMl Menggunakan fontSize Style DOM"

  1. AnonimMinggu, 10 Juli 2022 pukul 20.45.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti fontSize Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimMinggu, 10 Juli 2022 pukul 20.46.00 WIB

      Berikut adalah beberapa jenis browser populer yang biasa digunakan untuk mengaktifkan properti fontSize Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Mozilla firefox
      4. Opera
      5. Safari

      Hapus
  2. AnonimSelasa, 09 Agustus 2022 pukul 22.30.00 WIB

    Apa yang dimaksud dengan properti fontSize Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 09 Agustus 2022 pukul 22.30.00 WIB

      Properti fontSize Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai ukuran font teks.

      Hapus
    2. AnonimSelasa, 09 Agustus 2022 pukul 22.32.00 WIB

      Properti fontSize Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mendapatkan ukuran font karakter dalam sebuah kata yang akan muncul.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -