flexShrink Style HTML DOM dan Fungsinya
 |
| Properti flexShrink Style DOM |
- digunakan untuk mengembalikan nilai properti flexShrink: object.style.flexShrink
- digunakan untuk mengatur nilai properti flexShrink: object.style.flexShrink = "number|initial|inherit"
- 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.
<!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>
Klik Tombol
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
- 13 Value fontSize Style DOM pada HTML [klik]
- 5 Value Properti fontStyle DOM pada HTML [klik]
- 4 Value Properti fontVariant Style DOM pada HTML [klik]
- 7 Value Properti fontWeight Style DOM pada HTML [klik]
- 4 Value Properti fontSizeAdjust Style DOM pada HTML [klik]
- 5 Value Properti Height Style DOM pada HTML [klik]
- 4 Value Properti Isolation Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti flexShrink Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti flexShrink Style DOM pada HTML:
Hapus1. Google Chrome 5.0
2. Internet Explorer 8.0
3. Firefox 3.6
4. Opera 10.6
5. Safari 5.0
Apa yang dimaksud dengan properti flexShrink Style DOM pada HTML?
BalasHapusProperti 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.
HapusProperti 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