Создайте кнопку, чтобы переключать направление Flex между строкой и столбцом для стиля. - PullRequest
Новая
       15

Создайте кнопку, чтобы переключать направление Flex между строкой и столбцом для стиля.

0 голосов
/ 17 апреля 2019

Я пытаюсь создать кнопку, которая будет переключать направление flex-стиля между "строкой" и "столбцом"

Код, который я пробовал, основан на каком-то другом коде, который я использовал для переключения отображения между «flex» и «none».

Я не могу использовать идентификаторы, потому что есть несколько несмежных элементов.

Я ПОПРОБОВАЛ КОД НИЖЕ 

function setDisplay(className, displayValue) {
    var items = document.getElementsByClassName(className);
    for (var i=0; i < items.length; i++) {
      items[i].style.flexDirection = displayValue;
    }
}
function showResponsive() {
    var elements = document.getElementsByClassName("main");
    Array.prototype.forEach.call(elements, function(el) {
      if (el.style.flex-direction === "column") {
          el.style.flex-direction = "row";
      } else {
          el.style.flex-direction = "column";
      }
    });
}
.green{
    background:green;
    width:300px;
    height:300px;
}
.red{
    background:red;
    width:300px;
    height:300px;
}
.black{
    background:black;
    width:300px;
    height:300px;
}

.main{
    display:flex;
    flex-direction:column
}
<div><i>Click switch</i></div>
<div>
  <label class="switch">
      <input type="checkbox" onclick="showResponsive()" >
      <span class="slider round"></span>
  </label>  
</div>             
                    
<div class="main"> 
  <div class="green"></div>  
  <div  class="red"></div>  
  <div class="black"></div>
</div>

Код выше основан на коде ниже, который работает для изменения style.display между "flex" и "none" 

function setDisplay(className, displayValue) {
    var items = document.getElementsByClassName(className);
    for (var i=0; i < items.length; i++) {
      items[i].style.flexDirection = displayValue;
    }
}
function showResponsive() {
    var elements = document.getElementsByClassName("main");
    Array.prototype.forEach.call(elements, function(el) {
      if (el.style.flex-direction === "column") {
          el.style.flex-direction = "row";
      } else {
          el.style.flex-direction = "column";
      }
    });
}

Ответы [ 2 ]

1 голос
/ 17 апреля 2019

Замените свой код JavaScript следующим кодом: 


function showResponsive () {
    var elements = document.getElementsByClassName("main");
    Array.prototype.forEach.call(elements, function(el) {
      if (el.style.flexDirection === "column") {
          el.style.flexDirection = "row";
      } else {
          el.style.flexDirection = "column";
      }
    });
}
0 голосов
/ 17 апреля 2019

Имена свойств объекта стиля представлены в случае верблюда, а не в кебабе.Поэтому при настройке направления изгиба используйте: 

el.style.flexDirection = "row";
...