Mengatur Urutan HTML Menggunakan Order Style DOM
Properti Style order DOM pada HTML digunakan untuk melakukan order dari sebuah elemen relatif fleksibel ke sisa dari elemen fleksibel di dalam elemen container yang sama.
Sebelum memahami lebih dalam materi tentang Mengatur Urutan HTML Menggunakan Order Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Tranparansi Elemen HTML Menggunakan Opacity Style DOM [klik], Mengatur Posisi Objek HTML Menggunakan objectPosition Style DOM [klik], dan objectFit Style HTML DOM dan Fungsinya [klik].
Sintak:
Return Values: berfungsi untuk mengembalikan sebuah string berupa nilai yang merepresentasikan properti order dari suatu elemen.
Property Values:
Contoh:
 |
| Properti Order Style DOM |
Sintak:
- mengatur nilai properti order: object.style.order = "number|initial|inherit"
- mendapatkan nilai properti order: object.style.order
Return Values: berfungsi untuk mengembalikan sebuah string berupa nilai yang merepresentasikan properti order dari suatu elemen.
Baca Juga:
- number: digunakan untuk menentukan order untuk elemen fleksibel, dengan nilai default adalah 0.
- initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style order DOM pada
HTML
</title>
<style>
#main
{
width: 180px;
height: 90px;
border: 1px solid #000000;
display: flex;
}
#main div
{
width: 90px;
height: 90px;
}
</style>
</head>
<body>
<!-- dua DIV dengan warna
berbeda. -->
<div id="main">
<div
style="background-color:black;"
id="black">
</div>
<div
style="background-color:white;"
id="white">
Putih.
</div>
</div>
<p>
Klik tombol berikut untuk
mengubah urutan dari empat
DIV:
</p>
<button
onclick="myFunction()">
CLICK
</button>
<!-- Ubah urutan dari DIV -->
<script>
function myFunction()
{
document.getElementById(
"black").style.order = "2";
document.getElementById(
"white").style.order = "1";
}
</script>
</body>
</html>
Referensi Tambahan:
- 12 Value Properti outlineStyle DOM pada HTML [klik]
- 6 Contoh Properti outlineWidth Style DOM pada HTML [klik]
- 6 Value Properti Overflow Style DOM pada HTML [klik]
- 6 Contoh Properti overflowX Style DOM pada HTML [klik]
- 6 Contoh Properti overflowY Style DOM pada HTML [klik]
- 4 Contoh Properti Padding Style DOM pada HTML [klik]
- 4 Value Properti paddingBottom Style DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Davin Finanda Firzi Pradhani, Dea Septiana, Delima Trisna Pramudiptha Poeger, Della Octaria Hadi, dan Dentha Albany.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti order Style DOM pada HTML?
BalasHapusBerikut merupakan beberapa jenis browser yang dapat digunakan oleh pengembang untuk mengaktifkan properti order Style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer 12.0
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti order Style DOM pada HTML?
BalasHapusProperti order style dom pada HTML merupakan properti yang digunakan untuk menentukan urutan item fleksibel relatif terhadap nilai item fleksibel lainnya yang terdapat di dalam container yang sama.
HapusProperti order digunakan untuk mendapatkan dan menetapkan suatu urutan item fleksibel relatif terhadap nilai item fleksibel lainnya yang terdapat pada posisi container yang sama.
Hapus