Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Lebar Maksimal HTML Menggunakan maxWidth Style DOM

Properti maxWidth Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai lebar maksimum dari suatu elemen. Properti maxWidth hanya berdampak pada elemen block-level, elemen absolute, atau elemen posisi yang bersesuaian.

5 Value Properti maxWidth Style DOM pada HTML
Properti maxWidth Style DOM

Sebelum memahami lebih dalam materi tentang Mengatur Lebar Maksimal HTML Menggunakan maxWidth Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Panjang Maksimal HTML Menggunakan maxHeight Style DOM [klik], Mengatur Batas Atas HTML Menggunakan marginTop Style DOM [klik], dan Mengatur Margin Kanan HTML Menggunakan marginRight Style DOM [klik].

Sintak:
  • digunakan untuk mengembalikan nilai properti maxWidth: object.style.maxWidth
  • digunakan untuk mengatur nilai properti maxWidth: object.style.maxWidth = "none|length|%|initial|inherit"

Property Values:
  • none: merupakan nilai default yang tidak disertai nilai batasan apapun pada ukuran lebar dari suatu elemen.
  • length: digunakan untuk mendefinisikan nilai lebar maksimum dalam unit length.
  • %: digunakan untuk mendefinisikan nilai lebar maksimum dalam satu persen elemen parent.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan dari elemen parent.

Return Values: berfungsi untuk mengembalikan nilai lebar maksimum dari suatu elemen.

Baca Juga:

Contoh: mengatur nilai lebar dalam unit length.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style maxWidth DOM

</title>

</head>

 

<style>

#Bon1 

{

color: white;

width: 300px;

background: green;

}

</style>

 

<body>

<center>

 

<h1 

id="Bon1">

Blog Elfan

</h1>

 

<h2>

Properti Style maxWidth DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBons()">

Click to change

</button>

 

<script>

function myBons() 

{

// mengatur nilai lebar 

// menggunakan unit length.

document.getElementById(

"Bon1").style.maxWidth = "220px";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style maxWidth DOM




Contoh: mengatur nilai lebar dalam satuan '%'.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style maxWidth DOM

</title>

</head>

 

<style>

#Don1 

{

color: white;

width: 50%;

background: green;

}

 

#Don_Center 

{

background: yellow;

width: 400px;

margin-left: 150px;

}

</style>

 

<body>

 

<center 

id="Don_Center">

 

<h3 

id="Don1">

Blog Elfan

</h3>

 

<h2>

Properti Style maxWidth DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myDons()">

Click to change

</button>

 

<script>

function myDons() 

{

// Mengatur nilai lebar 

// menggunakan %.

document.getElementById(

"Don1").style.maxWidth = "35%";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style maxWidth DOM



Artikel ini didedikasikan kepada: Bobby Alessandro Evandra Lutfi Nugroho, Brian Inderajati, Camelia Zara Arthamevea, Chisbiya Umi Latifa, dan Daffa Agnis Putra.

6 komentar untuk "Mengatur Lebar Maksimal HTML Menggunakan maxWidth Style DOM"

  1. Jenis browser apa saja yang biasa digunakan oleh seorang pengembang untuk mengaktifkan properti maxWidth Style DOM pada HTML?

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

      Hapus
  2. Apa yang dimaksud dengan properti maxWidth Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti maxWidth Style DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai lebar maksimum dari suatu elemen.

      Hapus
    2. Properti maxWidth Style DOM pada HTML merupakan properti yang hanya berpengaruh pada elemen level blok atau elemen dengan posisi absolut atau tetap.

      Hapus
    3. Lebar nilai dari elemen tidak boleh lebih besar daripada nilai yang telah ditentukan oleh properti maxWidth.

      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 -