Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Panjang Maksimal HTML Menggunakan maxHeight Style DOM

Properti maxHeight Style DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai height maksimum dari suatu elemen. Nilai properti maxHeight hanya memengaruhi elemen pada posisi level block, absolut, dan fixed elemen.

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

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

Return Values: mengembalikan sebuah string yang merepresentasikan nilai height maksimum dari suatu elemen.

Baca Juga:

Property Values:
  • none: merupakan nilai default dan tidak mengandung max-height yang secara sinonim tidak tertuju pada nilai spesifik height maksimum apapun.
  • length: properti ini digunakan untuk mendefinisikan nilai max-height dalam satuan length. Nilai length dapat diatur menggunakan satuan ukur px, em, dan lain sebagainya.
  • %: digunakan untuk mendefinisikan nilai max-height dalam satuan persen.
  • initial: digunakan untuk mengatur nilai dari max_height ke nilai default.
  • inherit: digunakan untuk menerima nilai turunan dari elemen parent.

Contoh: mengatur nilai height maksimum dari elemen menggunakan unit length.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style maxHeight DOM

</title>

</head>

 

<style>

#Bon1 

{

color: white;

height: 100px;

background: green;

}

</style>


 <body>

<center>

 

<h1 

id="Bon1">

Blog Elfan

</h1>

 

<h2>

Properti Style maxHeight DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myBons()">

Click to change

</button>

 

<script>

function myBons() 

{

// Mengatur panjang maksimum 

// menggukana unit length.

document.getElementById(

"Bon1").style.maxHeight =

"40px";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Style maxHeight DOM




Contoh: digunakan untuk mengatur nilai height maksimum menggunakan satuan ukur "%".

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Style maxHeight DOM

</title>

</head>

 

<style>

#Don1 

{

color: white;

height: 50%;

background: green;

}

 

#Don_Center 

{

background: yellow;

width: 400px;

height: 150px;

margin-left: 150px;

text-align: center;

}

</style>

 

<body>

 

<div 

id="Don_Center">

 

<h3 

id="Don1">

Blog Elfan

</h3>

 

<h2>

Properti Style maxHeight DOM

</h2>

 

<br>

 

<button 

type="button" 

onclick="myDons()">

Click to change

</button>

 

</div>

 

<script>

function myDons() 

{

// mengatur nilai height 

// maksimum.

document.getElementById(

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

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style maxHeight DOM



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

6 komentar untuk "Mengatur Panjang Maksimal HTML Menggunakan maxHeight Style DOM"

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

    BalasHapus
    Balasan
    1. Berikut merupakan beberapa jenis browser yang dapat digunakan oleh seorang pengembang untuk mengaktifkan properti maxHeight Style DOM pada HTML:
      1. Google Chrome
      2. Edge
      3. Mozilla Firefox
      4. Opera
      5. Safari

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

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

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

      Hapus
    3. Tinggi dari suatu elemen tidak boleh lebih besar dari nilai yang telah ditentukan oleh properti maxHeight.

      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 -