DAFTAR LABEL POPULER PENELITIAN.ID
DAFTAR LABEL POPULER PENELITIAN.ID
Jangan Buka Artikel Ini!
DAFTAR ARSIP POSTING PENELITIAN.ID
DAFTAR ARSIP POSTING PENELITIAN.ID
flexShrink Style HTML DOM dan Fungsinya
- Dapatkan link
- Aplikasi Lainnya
Sintak:
- 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]
- Dapatkan link
- Aplikasi Lainnya
Komentar
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 ~
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