flexShrink Style HTML DOM dan Fungsinya
Sebelum memahami lebih dalam materi tentang flexShrink Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: flexGrow Style HTML DOM dan Fungsinya, flexFlow Style HTML DOM dan Fungsinya, dan flexDirection Style HTML DOM dan Fungsinya.
- 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
- 5 Value Properti fontStyle DOM pada HTML
- 4 Value Properti fontVariant Style DOM pada HTML
- 7 Value Properti fontWeight Style DOM pada HTML
- 4 Value Properti fontSizeAdjust Style DOM pada HTML
- 5 Value Properti Height Style DOM pada HTML
- 4 Value Properti Isolation Style DOM pada HTML
5 komentar untuk "flexShrink Style HTML DOM dan Fungsinya"
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 -
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