Mengatur Posisi HTML Menggunakan justifyContent Style DOM
 |
| Properti justifyContent Style DOM |
- digunakan untuk mengembalikan nilai properti justifyContent: object.style.justifyContent
- digunakan untuk mengatur nilai properti justifyContent: object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"
Property Values:
- flex-start: digunakan untuk menentukan perataan item flex yang dimulai dari bagian awal container.
- flex-end: digunakan untuk menentukan perataan item flex yang dibuat dibagian akhir dari container.
- center: digunakan untuk menentukan perataan item flex pada bagian center dari container.
- space-between: item flex ditempatkan dengan event spasi, dimana item didorong ke bagian awal dan bagian akhir.
- space-around: item flex ditempatkan dengan spasi yang sama dari setiap bagian sudut.
- space-evenly: item flex ditempatkan dengan spasi yang sama diantar keduanya, tetapi spasi bagian corner-nya berbeda.
- initial: item ditempatkan sesuai dengan nilai default-nya.
- inherit: item ditempatkan sesuai dengan nilai turunan yang didapatkan dari elemen parent.
Return Values: berfungsi untuk mengembalikan sebuang string yang merepresentasikan properti justifyContent dari suatu elemen.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style justifyContent
DOM pada HTML
</title>
<style>
#MKK1
{
width:500px;
display:flex;
height: 80px;
border:2px solid black;
background-color:white;
justify-content: space-around;
}
#MKK1 div
{
width: 60px;
height: 80px;
}
</style>
</head>
<body>
<center>
<h1
style = "color:green;width:40%;">
Blog Elfan
</h1>
<h2>
Properti Style justifyContent
DOM
</h2>
<div id = "MKK1">
<!-- src ="..." merupakan
pintasan dari URL gambar-->
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
<div>
<img
src ="..."
width = "60px"
height = "80px">
</div>
</div>
<button
type = "button"
onclick = "bonns()">
Submit
</button>
<!-- Script untuk menggunakan
style -->
<script>
function bonns()
{
document.getElementById("MKK1").style.justifyContent=
"space-between";
}
</script>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style justifyContent
DOM
</title>
<style>
#LL2
{
width:500px;
display:flex;
height: 80px;
border:2px solid black;
background-color:white;
justify-content: space-around;
}
#LL2 div
{
width: 60px;
height: 80px;
}
</style>
</head>
<body>
<center>
<h1
style = "color:green;width:40%;">
Blog Elfan
</h1>
<h2>
Properti Style justifyContent
DOM
</h2>
<div id = "LL2">
<!-- src = "..." berisi URL
gambar-->
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
<div>
<img
src = "..."
width = "60px"
height = "80px">
</div>
</div>
<button
type = "button"
onclick = "ll2s()">
Submit
</button>
<!-- Script untuk menggunakan
style -->
<script>
function ll2s()
{
document.getElementById("LL2").style.justifyContent=
"flex-start";
}
</script>
</center>
</body>
</html>
- 4 Value Properti listStyleImage Style DOM pada HTML [klik]
- 4 Value Properti listStylePosition Style DOM pada HTML [klik]
- 5 Value Properti listStyleType DOM pada HTML [klik]
- 5 Value Properti Margin Style DOM pada HTML [klik]
- 5 Contoh Properti marginBottom Style DOM pada HTML [klik]
- 5 Value Properti marginLeft Style DOM pada HTML [klik]
- 5 Value Properti marginRight Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan oleh para pengembang untuk mengaktifkan properti justifyContent Style DOM pada elemen HTML?
BalasHapusBerikut ini adalah beberapa jenis browser yang biasa digunakan oleh para pengembang untuk mengaktifkan properti justifyContent Style DOM pada elemen HTML:
Hapus1. Google Chrome
2. Internet Explorer 12.0
3. Firefox
4. Opera
Apa yang dimaksud dengan properti justifyContent Style DOM pada HTML?
BalasHapusProperti justifyContent Style DOM pada HTMl merpuakan properti yang digunakan untuk menyelaraskan items container fleksibel ketika items tersebut tidak menggunakan semua ruang yang tersedia pada sumbu utama atau pada main-axis secara horizontal.
HapusProperti justifyContent Style DOM pada HTMl merpuakan properti yang digunakan untuk mendapatkan dan menetapkan cara menyelaraskan item container fleksibel ketika item tersebut menggunakan semua ruang yang tersedia secara horizontal.
Hapus