DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

flexShrink Style HTML DOM dan Fungsinya

Properti flexShrink Style DOM pada HTML digunakan untuk mengatur bagaimana item spesifik dalam suatu relasi terhadap sisa item fleksibel pada container.

Sintak:
  • digunakan untuk mengembalikan nilai properti flexShrink: object.style.flexShrink
  • digunakan untuk mengatur nilai properti flexShrink: object.style.flexShrink = "number|initial|inherit"


3 Value Properti flexShrink Style DOM pada HTML
Properti flexShrink Style DOM

Property Values:
  • number: digunakan untuk mengatur sebuah angka yang digunakan untuk menentukan seberapa banyak item yang akan melakukan shrink dalam suatu relasi item fleksibel. Nilai properti ini memiliki nilai default 0.
  • initial: digunakan untuk mengatur nilai properti flexShrink ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan dari elemen parent.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexShrink DOM 

HTML

</title>

 

<style>

#Bons1s 

{

width: 350px;

height: 100px;

border: 1px solid #c3c3c3;

display: flex;

}

 

#Bons1s div 

{

flex-grow: 1;

flex-shrink: 1;

flex-basis: 300px;

}

</style>

 

</head>

 

<body>

 

<h4>

Klik Tombol

</h4>

 

<button 

onclick="MM1()">

Click Here!

<br>

</button>

 

<p></p>

 

<div id="Bons1s">

 

<div 

style="background-color:#64c962;

color:white;">

Blog Elfan

</div>

 

<div 

style="background-color:#2c932a;

color:white;"

id="Bons1s2">

Blog TIK

</div>

 

</div>

 

<script>

function MM1() 

{

// Safari 6.1+

document.getElementById(

"Bons1s2").style.WebkitFlexShrink = "5";

 

document.getElementById(

"Bons1s2").style.flexShrink = "5";

}

</script>

 

</body>

 

</html>

Output:

Klik Tombol

Blog Elfan
Blog TIK


Contoh:

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style flexShrink DOM 

HTML

</title>

 

<style>

#MK2s 

{

width: 350px;

height: 100px;

border: 1px solid #c3c3c3;

display: flex;

}

 

#MK2s div 

{

flex-grow: 1;

flex-shrink: 1;

flex-basis: 300px;

}

</style>

 

</head>

 

<body>

 

<h3>

Properti flex-shrink DOM

</h3>

 

<div id="MK2s">

 

<div 

style="background-color:#44cc3f;">

</div>

 

<div 

style="background-color:#34a030;">

</div>

 

<div 

style="background-color:#2c932a;">

</div>

 

<div 

style="background-color:#267023;">

</div>

 

<div 

style="background-color:#175415;">

</div>

 

</div>

 

</body>

 

</html>

Output:

Properti flex-shrink DOM


Komentar

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti flexShrink Style DOM pada HTML:
      1. Google Chrome 5.0
      2. Internet Explorer 8.0
      3. Firefox 3.6
      4. Opera 10.6
      5. Safari 5.0

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

    BalasHapus
    Balasan
    1. Properti flexShrink Style DOM pada HTML merupakan properti yang digunakan untuk menentukan bagaimana suatu item dapat menyusut relatif terhadap nilai item fleksibel lainnya yang berada dalam satu container yang sama.

      Hapus
    2. Properti HTML DOM Style flexShrink digunakan untuk mengatur proporsi dimana suatu elemen akan mengecilkan ukurannya yang berkaitan dengan nilai sibling yang terdapat di dalam elemen flex.

      Hapus

Posting Komentar

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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas