flexFlow Style HTML DOM dan Fungsinya
- digunakan untuk mengembalikan nilai string yang merepresentasikan properti flexFlow dari suatu elemen: object.style.flexFlow
- digunakan untuk mengatur nilai properti flexFlow: object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan properti flexFlow dari suatu elemen.
- flex-direction dan flex-wrap: Properti flewFlow merupakan kombinasi dari properti flexDirection dan properti flexWrap, dengan nilai default dari properti flex-direction dan flex-wrap adalah baris yang saat ini melakukan wrap.
- initial: berfungsi untuk mengatur nilai properti flexFlow ke nilai default-nya.
- inherit: berfungsi untuk menerima nilai turunan dari elemen parent.
Berikut adalah daftar nilai yang mungkin dari properti flexDirection dan flexWrap.
- flex-direction = "row|row-reverse|column|column-reverse|initial|inherit";
- flex-wrap = "nowrap|wrap|wrap-reverse|initial|inherit";
Contoh: digunakan untuk mengubah properti flexFlow dari "row wrap" ke "column wrap".
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flexFlow DOM
pada HTML
</title>
<style>
#MHN
{
width: 220px;
height: 150px;
border: 2px solid black;
/* Untuk Browser Safari */
display: -webkit-flex;
/* Untuk Browser Safari 6.1+
*/
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
#MHN div
{
width: 50px;
height: 70px;
}
</style>
</head>
<body>
<div id="MHN">
<div
style="background-color:lightgreen;">
M</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
K</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
N</div>
</div>
<button
onclick="myBons()">
Click Here
</button>
<script>
function myBons()
{
/* Untuk Safari */
document.getElementById("MHN").style.WebkitFlexFlow
= "column wrap";
document.getElementById("MHN").style.FlexFlow
= "column wrap";
}
</script>
</body>
</html>
Output:Contoh: digunakan untuk mengubah nilai properti flexFlow dari "row wrap" ke "row-reverse wrap-reverse".
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flexFlow DOM
pada HTML
</title>
<style>
#MKK2
{
width: 220px;
height: 150px;
border: 2px solid black;
/* Untuk Browser Safari */
display: -webkit-flex;
/* Untuk Browser Safari 6.1+*/
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
#MKK2 div
{
width: 50px;
height: 70px;
}
</style>
</head>
<body>
<div id="MKK2">
<div
style="background-color:lightgreen;">
M</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
K</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
N</div>
</div>
<button
onclick="myJins()">
Click Here
</button>
<script>
function myJins()
{
/* Browser Safari */
document.getElementById("MKK2").style.WebkitFlexFlow
= "row-reverse wrap-reverse";
document.getElementById("MKK2").style.FlexFlow
= "row-reverse wrap-reverse";
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flexFlow DOM
pada HTML
</title>
<style>
#MJJ3
{
width: 220px;
height: 150px;
border: 2px solid black;
/* Untuk Browser Safari */
display: -webkit-flex;
/* Untuk Browser Safari 6.1+
*/
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
#MJJ3 div
{
width: 50px;
height: 70px;
}
</style>
</head>
<body>
<div id="MJJ3">
<div
style="background-color:lightgreen;">
M</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
K</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
N</div>
</div>
<button
onclick="myDons()">
Click Here
</button>
<script>
function myDons() {
/* Browser Safari */
document.getElementById("MJJ3").style.WebkitFlexFlow
= "initial";
document.getElementById("MJJ3").style.FlexFlow
= "initial";
}
</script>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style flexFlow DOM
HTML
</title>
<style>
#KKK4
{
width: 220px;
height: 150px;
border: 2px solid black;
/* Untuk Browser Safari */
display: -webkit-flex;
/* Untuk Browser Safari 6.1+
*/
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
}
#KKK4 div
{
width: 50px;
height: 70px;
}
</style>
</head>
<body>
<div id="KKK4">
<div
style="background-color:lightgreen;">
M</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
K</div>
<div
style="background-color:green;">
A</div>
<div
style="background-color:lightgreen;">
N</div>
</div>
<button
onclick="myBon4()">
Click Here
</button>
<script>
function myBon4()
{
/* Untuk Browser Safari */
document.getElementById("KKK4").style.WebkitFlexFlow
= "inherit";
document.getElementById("KKK4").style.FlexFlow
= "inherit";
}
</script>
</body>
</html>
Output:- 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]
- 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 komentar untuk "flexFlow 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 flexFlow Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti flexFlow Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer 11.0
3. Firefox
4. Opera
5. Safari 6.1 WebkitFlexFlow
Apa yang dimaksud dengan properti fleFlow Style DOM pada HTML?
BalasHapusProperti flexFlow merupakan properti yang digunakan untuk menetapkan atau mengembalikan nilai panjang item yang relatif terhadap nilai item fleksibel lainnya pada wrap yang sama.
HapusProperti flexDirection merupakan properti yang digunakan untuk menentukan arah item fleksibel, dimana properti ini berguna untuk menentukan apakah suatu item fleksibel harus dilakukan wrap atau tidak.
BalasHapus