Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Ukuran Huruf HTMl Menggunakan fontSize Style DOM

Properti fontSize Style DOM pada HTML digunakan untuk mengatur atau mendapatkan nilai ukuran font dari karakter dalam sebuah kata yang harus dimunculkan.

13 Value fontSize Style DOM pada HTML
Properti fontSize Style DOM

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 [klik], Mengatur Gaya Huruf HTML Menggunakan Font Style DOM [klik], dan Mengatur Nilai Horizontal HTML Menggunakan cssFloat Style DOM [klik].

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>

 

<

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>

 

<

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>

 

<

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>

 

<

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.

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

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

    BalasHapus
    Balasan
    1. 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. Apa yang dimaksud dengan properti fontSize Style DOM pada HTML?

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

      Hapus
    2. 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 -