flexGrow Style HTML DOM dan Fungsinya
 |
| Properti flexGrow Style DOM |
- berfungsi untuk mengembalikan nilai properti flexGrow: object.style.flexGrow
- berfungsi untuk mengatur nilail properti flexGrow: object.style.flexGrow = "number|initial|inherit"
Properties:
- number: digunakan untuk menentukan nilai kuantitas angka yang digunakan untuk menentukan seberapa banyak item yang akan berkembang secara relatif terhadap sisa item fleksibel.
- initial: digunakan untuk mengatur nilai properti flexGrow ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.
Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti flex-grow dari suatu elemen.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flexGrow DOM
HTML
</title>
<style>
#main
{
width: 550px;
height: 70px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
}
#main
div:nth-of-type(1) {
-webkit-flex-grow: 1;
}
#main
div:nth-of-type(2) {
-webkit-flex-grow: 1;
}
#main div:nth-of-type(1) {
flex-grow: 1;
}
#main div:nth-of-type(2) {
flex-grow: 1;
}
</style>
</head>
<body>
<h1>
<center>
Bons
<button
onclick="flex()">
Press
</button>
</center>
</h1>
<h4>
Klik tombol 'Press' untuk
memperlihatkan 'properti
FlexGrow'.
</h4>
<div id="main">
<div
style="background-color:white;">
</div>
<div
style="background-color:green;"
id="mmn">
</div>
</div>
<script>
function flex()
{
// Mengakses dan melebarkan
// elemen item.
document.getElementById(
"mmn").style.flexGrow =
"1000";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flexGrow DOM
HTML
</title>
<style>
#main
{
width: 550px;
height: 70px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
}
#main
div:nth-of-type(1) {
-webkit-flex-grow: 1;
}
#main
div:nth-of-type(2) {
-webkit-flex-grow: 1;
}
#main
div:nth-of-type(3) {
-webkit-flex-grow: 1;
}
#main
div:nth-of-type(4) {
-webkit-flex-grow: 1;
}
#main
div:nth-of-type(1) {
flex-grow: 1;
}
#main
div:nth-of-type(2) {
flex-grow: 1;
}
#main
div:nth-of-type(3) {
flex-grow: 1;
}
#main
div:nth-of-type(4) {
flex-grow: 1;
}
</style>
</head>
<body>
<h1>
<center>
Bons
<button
onclick="flex()">
Press
</button>
</center>
</h1>
<h4>
Klik tombol 'Press' untuk
memperlihatkan 'Properti
FlexGrow'.
</h4>
<div id="main">
<div
style="background-color:white;">
</div>
<div
style="background-color:green;" id="gfr">
</div>
<div
style="background-color:white;">
</div>
<div
style="background-color:green;" id="gfrg">
</div>
</div>
<script>
function flex()
{
// SAFARI.
document.getElementById(
"gfr").style.WebkitFlexGrow = "8";
document.getElementById(
"gfr").style.flexGrow = "8";
// OTHERS.
document.getElementById(
"gfrg").style.WebkitFlexGrow = "8";
document.getElementById(
"gfrg").style.flexGrow = "8";
}
</script>
</body>
</html>
- 3 Value Properti fontFamily Style DOM pada HTML [klik]
- 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]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti flexGrow Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti flexGrow Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti flexGrow Style DOM pada HTML?
BalasHapusProperti flexGrow Style DOM pada HTML merupakan properti yang digunakan untuk menentukan seberapa banyak item yang akan grow relatif terhadap item fleksibel lainnya pada container yang sama.
HapusProperti flexGrow Style DOM pada HTML digunakan untuk mendapatkan dan menetapkan berapa banyak item yang dapat tumbuh relatif terhadap item fleksibel lainnya yang ada dalam suatu container.
Hapus