Можете ли вы динамически изменить направление flexbox в CSS и JavaScript? - PullRequest
Новая
       0

Можете ли вы динамически изменить направление flexbox в CSS и JavaScript?

1 голос
/ 14 февраля 2020

Учитывая переменную isRow, если true, я хочу отобразить строку flex-direction:, но если это false, я хочу столбец flex direction::

Если есть способ сделать это иначе, чем я пытаюсь, пожалуйста, дайте мне знать! 

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>

1 Ответ

0 голосов
/ 14 февраля 2020

вы должны изменить style.flex-direction на style.flexDirection и в отношении вашего комментария, да, вы можете использовать document.getElementById("flex-cointainer"), но сначала вы должны добавить идентификатор к вашему элементу, например

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...