DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mengatur Posisi HTML Menggunakan justifyContent Style DOM

Properti justifyContent Style DOM pada HTML digunakan untuk menentukan perataan item secara horizontal ketika properti tersebut tidak mampu untuk digunakan pada semua ruang yang tersedia. Properti justifyContent digunakan untuk mengatur posisi dari suatu elemen. Secara default, item akan diposisikan pada bagian awal dari container.

Sintak:
  • 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.

Contoh: mendeskripsikan nilai properti space-between.

<!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>


Contoh: mendeskripsikan nilai properti flex-start.

<!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>


Komentar

  1. Jenis browser apa saja yang dapat digunakan oleh para pengembang untuk mengaktifkan properti justifyContent Style DOM pada elemen HTML?

    BalasHapus
    Balasan
    1. Berikut ini adalah beberapa jenis browser yang biasa digunakan oleh para pengembang untuk mengaktifkan properti justifyContent Style DOM pada elemen HTML:
      1. Google Chrome
      2. Internet Explorer 12.0
      3. Firefox
      4. Opera

      Hapus
  2. Apa yang dimaksud dengan properti justifyContent Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti 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.

      Hapus
    2. Properti 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

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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas