相对于JavaScript,如何设置弹性商品的顺序?

要相对于JavaScript的其余部分设置灵活项的顺序,请使用order属性。您可以尝试运行以下代码以实现order属性-

示例

<!DOCTYPE html>

<html>

   <head>

      <style>

         #box {

            border: 1px solid #000000;

            width: 420px;

            height: 150px;

            display: flex;

         }

         #box div {

            height: 80px;

            width: 80px;

         }

      </style>

   </head>

   

   <body>

      <div id = "box">

      <div style = "background-color:orange;" ID ="myID1">DIV1</div>

      <div style = "background-color:blue;" id = "myID2">DIV2</div>

      <div style = "background-color:yellow;" id = "myID3">DIV3</div>

      </div>

      <button onclick = "display()">Set</button>

      <script>

         function display() {

            document.getElementById("myID1").style.order = "3";

            document.getElementById("myID2").style.order = "1";

            document.getElementById("myID3").style.order = "2";

         }

      </script>

   </body>

   

</html>

以上是 相对于JavaScript,如何设置弹性商品的顺序? 的全部内容, 来源链接: utcz.com/z/316864.html

回到顶部