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

Mengatur Lebar Minimal HTML Menggunakan minWidth Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style minWidth DOM pada HTML digunakan untuk mengatur atau mengembalikan nilai lebar minimum dari suatu elemen. Properti ini dapat bekerja pada elemen level-block atau pada elemen dengan posisi yang bersesuaian atau posisi absolut.

Sebelum memahami lebih dalam materi tentang Mengatur Lebar Minimal HTML Menggunakan minWidth Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Panjang Minimal HTML Menggunakan minHeight Style DOM, Mengatur Lebar Maksimal HTML Menggunakan maxWidth Style DOM, dan Mengatur Panjang Maksimal HTML Menggunakan maxHeight Style DOM.

Sintak:
  • mengembalikan nilai properti minWidth: object.style.minWidth
  • mengatur nilai properti minWidth: object.style.minWidth = "length|%|initial|inherit"

Property Values:
  • length: digunakan untuk mengatur nilai lebar minimum dalam unit length.
  • %: digunakan untuk mengatur nilai lebar minimum dalam satuan persen dari elemen parent.
  • initial: digunakan untuk mengatur nilai properti ke nilai default.
  • inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.

Return Values: digunakan untuk mengembalikan sebuah string yang merepresentasikan nilai lebar minimum dari elemen yang diseleksi.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style minWidth DOM 

pada HTML

</title>

 

<style>

h1 

{color: green;}

 

#mk1g 

{width: 60%;

background-color: lightgreen;}

</style>

 

</head>

 

<body>

<center>

 

<h1>

Blog Elfan

</h1>

 

<button 

onclick="min()">

Press

</button>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai minWidth dari 

suatu elemen.

</h4>

 

<div 

id="mk1g">

 

<p>

Properti DOM Style minWidth: 

digunakan untuk mengatur nilai 

minWidth dari suatu elemen.

</p>

 

<p>

Elemen DIV diggunakan untuk 

memperlihatkan properti 

min.width.

</p>

 

<p>

Klik tombol 'press' untuk 

mengeksekusi properti.

</p>

 

</div>

 

<script>

function min() 

{

document.getElementById(

"mk1g").style.minWidth = "500px";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Klik tombol 'Press' untuk mengatur nilai minWidth dari suatu elemen.

Properti DOM Style minWidth: digunakan untuk mengatur nilai minWidth dari suatu elemen.

Elemen DIV diggunakan untuk memperlihatkan properti min.width.

Klik tombol 'press' untuk mengeksekusi properti.



Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style minWidth DOM 

pada HTML

</title>

 

<style>

h1 

{color: green;}

 

#mnl2g 

{width: 60%;

background-color: lightgreen;}

</style>

 

</head>

 

<body>

<center>

 

<h1>

Blog Elfan

</h1>

 

<button 

onclick="min()">

Press

</button>

 

<h4>

Klik tombol 'Press' untuk 

melihat kotak embedded 

ditampilkan dengan properti 

minWidth dari elemen div.

</h4>

 

<div 

style="background:lightgreen;

min-width:200px;"

id="mnl2g">

 

<p>

Properti Style minWidth DOM: 

digunakan untuk mengatur 

properti minWidth dari suatu 

elemen.

</p>

 

<p>

Elemen DIV, digunakan untuk 

memperlihatkan properti 

min.width.

</p>

 

<p>

Klik tombol 'press' untuk 

mengeksekusi properti.

</p>

 

</div>

 

<script>

function min() 

{

alert(document.getElementById(

"mnl2g").style.minWidth);

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Klik tombol 'Press' untuk melihat kotak embedded ditampilkan dengan properti minWidth dari elemen div.

Properti Style minWidth DOM: digunakan untuk mengatur properti minWidth dari suatu elemen.

Elemen DIV, digunakan untuk memperlihatkan properti min.width.

Klik tombol 'press' untuk mengeksekusi properti.


Artikel ini didedikasikan kepada: Camelia Zara Arthamevea, Chisbiya Umi Latifa, Daffa Agnis Putra, Dahlia Kusuma Ramadhani Dewi Suryani, dan Davin Finanda Firzi Pradhani.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Lebar Minimal HTML Menggunakan minWidth Style DOM"

  1. AnonimSenin, 18 Juli 2022 pukul 18.51.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimSenin, 18 Juli 2022 pukul 18.51.00 WIB

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

      Hapus
  2. AnonimRabu, 10 Agustus 2022 pukul 17.43.00 WIB

    Apa yang dimaksud dengan properti minWidth Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 10 Agustus 2022 pukul 17.44.00 WIB

      Properti minWidth Style DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai lebar minimum dari suatu elemen.

      Hapus
    2. AnonimRabu, 10 Agustus 2022 pukul 17.44.00 WIB

      Properti minWidth Style DOM pada HTML hanya memiliki efek pada elemen level blok atau elemen dengan posisi absolut atau tetap.

      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 -