Thuộc tính đơn đặt hàng HTML DOM Style trả về và sửa đổi thứ tự của mục linh hoạt so với phần còn lại của mục linh hoạt trong cùng một vùng chứa trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Trả lại đơn đặt hàng
object.order
2. Sửa đổi đơn đặt hàng
object.order = “value”
Ở đây, giá trị có thể là -
Giá trị| | Giải thích |
|---|---|
| tên viết tắt | Nó đặt giá trị thuộc tính này thành giá trị mặc định của nó. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| số | Nó đại diện cho số chỉ định thứ tự của mặt hàng linh hoạt. |
Hãy để chúng tôi xem một ví dụ về Thuộc tính thứ tự kiểu DOM HTML -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.container {
border: 3px solid #fff;
margin: 1rem auto;
display: flex;
padding: 2rem;
}
.box {
width: 100px;
height: 100px;
}
</style>
<body>
<h1 style="text-align:center">DOM Style order Property Demo</h1>
<div class="container">
<div class="box" id="b1" style="background-color:#7F055F;"></div>
<div class="box" id="b2" style="background-color:#3A015C;"></div>
<div class="box" id="b3" style="background-color:#177E89;"></div>
</div>
<button onclick="set()" class="btn">Change order</button>
<script>
function set() {
document.querySelector('#b1').style.order = "3";
document.querySelector('#b2').style.order = "2";
document.querySelector('#b3').style.order = "1";
}
</script>
</body>
</html> Đầu ra
Nhấp vào “ Thay đổi đơn đặt hàng ”Để thay đổi thứ tự của các mục linh hoạt bên trong màu trắng vùng chứa biên giới.
