Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

3 Value Properti Order Style DOM pada HTML
Properti 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 [klik], Mengatur Posisi Objek HTML Menggunakan objectPosition Style DOM [klik], dan objectFit Style HTML DOM dan Fungsinya [klik].

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:

Property Values:
  • 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>


Artikel ini didedikasikan kepada: Davin Finanda Firzi Pradhani, Dea Septiana, Delima Trisna Pramudiptha Poeger, Della Octaria Hadi, dan Dentha Albany.

5 komentar untuk "Mengatur Urutan HTML Menggunakan Order Style DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti order Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut merupakan beberapa jenis browser yang dapat digunakan oleh pengembang untuk mengaktifkan properti order Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer 12.0
      3. Firefox
      4. Opera
      5. Safari

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

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

      Hapus
    2. Properti order digunakan untuk mendapatkan dan menetapkan suatu urutan item fleksibel relatif terhadap nilai item fleksibel lainnya yang terdapat pada posisi container yang sama.

      Hapus

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 -