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> ```