Mengatur Urutan HTML Menggunakan Order Style DOM
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, Mengatur Posisi Objek HTML Menggunakan objectPosition Style DOM, dan objectFit Style HTML DOM dan Fungsinya.
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.
- 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>
- 12 Value Properti outlineStyle DOM pada HTML
- 6 Contoh Properti outlineWidth Style DOM pada HTML
- 6 Value Properti Overflow Style DOM pada HTML
- 6 Contoh Properti overflowX Style DOM pada HTML
- 6 Contoh Properti overflowY Style DOM pada HTML
- 4 Contoh Properti Padding Style DOM pada HTML
- 4 Value Properti paddingBottom Style DOM pada HTML
5 komentar untuk "Mengatur Urutan HTML Menggunakan Order Style DOM"
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 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