1-調整項目順序 · 前端教學筆記[更新中...]

# 項目排列的小案例 ## 1. 簡介 - `order`屬性的應用非常廣泛,例如附件上傳, 素材管理中的應用 - 本例以極少的代碼讓你秒懂`order`的原理與應用 --- ## 2. 示例 ![](https://img.kancloud.cn/c1/6b/c16b843705188e8d5375ac2bd381330f_458x299.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>項目的ordr屬性小案例</title> <style> /* 容器尺寸 */ .container { width: 300px; height: 200px; display: flex; flex-flow: column nowrap; justify-content: flex-end; } .item { width: 150px; /* height: 50px; */ font-size: 1.5rem; background-color: lightcyan; } </style> </head> <body> <div class="container"> <div class="item"> 1 <button onclick="down(this.parentNode)">Down</button><button onclick="up(this.parentNode)">Up</button> </div> <div class="item"> 2 <button onclick="down(this.parentNode)">Down</button><button onclick="up(this.parentNode)">Up</button> </div> <div class="item"> 3 <button onclick="down(this.parentNode)">Down</button><button onclick="up(this.parentNode)">Up</button> </div> </div> <script> function down(ele) { ele.style.order = ele.style.order * 1 + 1; } function up(ele) { ele.style.order = ele.style.order * 1 - 1; } </script> </body> </html> ```