你能在 CSS 和 JavaScript 中動態改變 flexbox 的 flex-direction 嗎？

Question

給定一個變量 isRow，如果為真，我想顯示 flex-direction: 行，但如果為假，我想顯示 flex 方向：列。

如果有一種方法可以與我嘗試的方法不同，請告訴我！

 document.getElementsByClassName("flex-container")[0].style.flex-direction = "row"; //can I use: document.getElementById("flex-cointainer") instead?

 .flex-container { display: flex; flex-direction: column; background-color: DodgerBlue; } .flex-container > p { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; }

 <div class = "flex-container"> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> </div>

Answer 1

您應該將style.flex-direction更改為style.flexDirection以及您的評論，是的，您可以使用document.getElementById("flex-cointainer")但首先您必須將 id 添加到您的元素中，例如

<div class="flex-container" id="flex-container">

這是完整的工作代碼：

 var isRow = true; var myContainer = document.getElementById("flex-container"); if(isRow) { myContainer.style.flexDirection = "row"; }else { myContainer.style.flexDirection = "column"; }

 #flex-container { display: flex; flex-direction: column; background-color: DodgerBlue; } #flex-container > p { background-color: #f1f1f1; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; }

 <!DOCTYPE html> <html> <head> <title>Test</title> <head> <body> <div id="flex-container"> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> </div> </body> </html>

你能在 CSS 和 JavaScript 中動態改變 flexbox 的 flex-direction 嗎？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-02-14 14:37:40

你能在 CSS 和 JavaScript 中動態改變 flexbox 的 flex-direction 嗎？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-02-14 14:37:40

解決方案1
0 已采納 2020-02-14 14:37:40