Properti Flex Style DOM HTML dan Fungsinya
 |
| Properti Flex Style DOM |
Sintak:
- digunakan untuk mengembalikan nilai properti flex style: object.style.flex
- digunakan untuk mengatur nilai properti flex: object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah nilai string, yang merepresentasikan nilai properti flex dari suatu elemen pada dokumen HTML.
- flex-grow: berfungsi untuk menentukan seberapa banyak item yang akan berkembang terhadap sisa item fleksibel.
- flex-shrink: berfungsi untuk menentukan seberapa banyak item yang akan shrink terhadap sisa item fleksibel.
- flex-basis: berfungsi untuk menentukan nilai length dari item.
- inherit: berfungsi untuk menerima nilai turunan dari elemen parent.
Contoh: memiliki nilai length yang sama dari semua elemen div.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flex DOM HTML
</title>
<style>
#nnn1
{
width: 220px;
height: 60px;
border: 1px solid black;
display: -webkit-flex;
/* Safari */
display: flex;
}
</style>
</head>
<body>
<center>
<h1
style="color: green;">
Blog Elfan
</h1>
<h2
style="color: black;">
Properti Style flex DOM
</h2>
<div id="nnn1">
<div style="background-color:green;">Bons
<div style="background-color:lightblue;">For
<div style="background-color:green;">Bons
</div>
</div>
</div>
</div>
<br>
<button
onclick="BonS()">
CLICK
</button>
<script>
function BonS()
{
var x = document.getElementById("nnn1");
var y = x.getElementsByTagName("DIV");
var i = 0;
for (i; i < y.length; i++)
{
// IE10
y[i].style.msFlex = "1";
// Safari 6.1+
y[i].style.WebkitFlex = "1";
y[i].style.flex = "1";
}
}
</script>
</center>
</body>
</html>
Blog Elfan
Properti Style flex DOM
Contoh: item flex.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flex DOM HTML
</title>
<style>
#nn2n
{
width: 220px;
height: 300px;
border: 1px solid black;
display: -webkit-flex;
/* Safari */
display: flex;
}
</style>
</head>
<body>
<center>
<h1
style="color: green;">
Blog Elfan
</h1>
<h2
style="color: black;">
Properti Style flex DOM
</h2>
<div id="nn2n">
<div style="background-color:green;">
BONS2
</div>
<div style="background-color:lightblue;">
For1
</div>
<div style="background-color:green;">
BONS2
</div>
</div>
<br>
<button
onclick="KongS()">
CLICK
</button>
<script>
function KongS()
{
var x =
document.getElementById("nn2n");
var y =
x.getElementsByTagName("DIV");
var i = 0;
for (i; i < y.length; i++)
{
// IE10
y[i].style.msFlex = "0";
// Safari 6.1+
y[i].style.WebkitFlex = "0";
y[i].style.flex = "1 125px";
}
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Properti Style flex DOM
- 3 Value Properti flexShrink Style DOM pada HTML [klik]
- 5 Value Properti flexWrap Style DOM pada HTML [klik]
- 5 Value Properti cssFloat Style DOM pada HTML [klik]
- 6 Value Properti Font Style DOM pada HTML [klik]
- 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]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti flex style dom pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti Flex Style DOM pada HTML:
Hapus1. Google Chrome 1.2
2. Internet Explorer 4.0
3. Firefox 1.0
4. Opera 4.0
5. Apple Safari 1.0
Apa yang dimaksud dengan properti flex Style DOM pada HTML?
BalasHapusProperti flex Style DOM pada HTML merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai panjang item yang relatif terhadap nilai item fleksibel lainnya pada satu container yang sama.
HapusProperti flex adalah singaktan untuk properti flexGrow, flexShrink, dan flexBasis. Catatan: jika elemen yang terdapat pada properti flex bukanlah item yang sifatnya fleksibel, maka nilai properti flex tidak akan dapat memengaruhi elemen tersebut.
Hapus