Pinned

Home / html / Mengatur Ketebalan Huruf HTML Menggunakan fontWeight Style DOM

Mengatur Ketebalan Huruf HTML Menggunakan fontWeight Style DOM

7/10/2022 09:20:00 PM
Properti fontWeight digunakan untuk mengatur atau mengembalikan nilai sebuah karakter dapat berubah menjadi thick atau thin ketika muncul pada layar monitor.


7 Value Properti fontWeight Style DOM pada HTML
Properti fontWeight Style DOM

Sebelum memahami lebih dalam materi tentang Mengatur Ketebalan Huruf HTML Menggunakan fontWeight Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Variasi Huruf HTML Menggunakan fontVariant Style DOM [klik], Mengatur Gaya Huruf HTML Menggunakan fontStyle DOM [klik], dan Mengatur Ukuran Huruf HTMl Menggunakan fontSize Style DOM [klik].

Sintak:
  • digunakan untuk mengembalikan nilai properti fontWeight: object.style.fontWeight
  • digunakan untuk mengatur nilai properti fontWeight: object.style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"

Property Value:
  • normal: merupakan nilai default dari font.
  • lighter: membuat font menjadi lebih lighter dari font normal.
  • bold: membut font menjadi lebih tebal dari font normal.
  • bolder: membuat font menjadi paling tebal diantara semua jenis font.
  • value: mendefinisikan nilai dari 100 ke 900, dimana angka 400 merupakan nilai normalnya.
  • initial: mengatur properti fontWeight ke nilai default-nya.
  • inherit: menerima nilai turunan properti dari elemen parent.

Return Values: mengembalikan nilai ketebalan huruf dari sebuah string.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontWeight DOM

</title>

</head>

 

<body>

<center>

 

<!-- Properti untuk tag p. -->

<p 

style="color: green;

width: 100%;

font-size: 30px;

font-weight: bold;"

id="sudo">

Blog Elfan

</p>

 

<h2>

Properti Style fontWeight DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBons()">

Click to change

</button>

 

<script>

function myBons() 

{

// Pengaturan properti untuk 

// tag "p" dari 'bold' menjadi 

// 'lighter'.

document.getElementById(

"sudo").style.fontWeight = "lighter";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontWeight DOM




Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontWeight DOM

</title>

</head>

 

<body>

<center>

 

<p 

style="color: green;

width: 100%;

font-size: 30px;"

id="sudo">

Blog Elfan

</p>

 

<h2>

Properti Style fontWeight DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBons()">

Click to change

</button>

 

<script>

function myBons() 

{

// Pengaturan properti dari 

// normal menjadi bold.

document.getElementById(

"sudo").style.fontWeight = "bold";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontWeight DOM




Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontWeight DOM

</title>

</head>

 

<body>

<center>

 

<p 

style="color: green;

width: 100%;

font-size: 30px;"

id="sudo">

Blog Elfan

</p>

 

<h2>

Properti Style fontWeight DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myDons()">

Click to change

</button>

 

<script>

function myDons() 

{

// Pengaturan properti bolder.

document.getElementById(

"sudo").style.fontWeight = "bolder";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontWeight DOM




Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style fontWeight DOM

</title>

</head>

 

<body>

<center>

 

<p 

style="color: green;

width: 100%;

font-size: 30px;"

id="sudo">

Blog Elfan

</p>

 

<h2>

Properti Style fontWeight DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBonws()">

Click to change

</button>

 

<script>

function myBonws() 

{

// Pengaturan fon menggunakan 

// value.

document.getElementById(

"sudo").style.fontWeight = "1000";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style fontWeight DOM



Artikel ini didedikasikan kepada: Amnatulaina Harissaputri, Anindya Dian Putriani, Anisa Fitri Hanita, Annisa Nurisandi, dan Annisathina Hermy Utami.

5 komentar:

  1. AnonimMinggu, 10 Juli 2022 pukul 21.26.00 WIB

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

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

      Berikut ini adalah beberapa jenis browser yang biasa digunakan untuk mengaktifkan properti fontWeight 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.39.00 WIB

    Apa yang dimaksud dengan properti fontWeight Style DOM pada HTML?

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

      Properti fontWeight Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan sebarapa tebal atau seberapa tipis suatu karakter dalam teks harus ditampilkan.

      Hapus
    2. AnonimSelasa, 09 Agustus 2022 pukul 22.40.00 WIB

      Properti fontWeight Style DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai ketebalan karakter teks dari suatu elemen.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-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 -

Langganan: Posting Komentar ( Atom )