Question

我想创建一个按钮，该按钮将在“行”和“列”之间切换样式的弯曲方向

我尝试的代码基于我用于在“ flex”和“ none”之间切换显示的其他代码。

我不能使用ID，因为那里有多个不连续的元素。

我尝试了下面的代码

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>

上面的代码基于下面的代码，该代码用于在“ flex”和“ none”之间更改style.display。

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";
      }
    });
}

Answer 1

用以下代码替换您的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";
      }
    });
}

Answer 2

样式对象上的属性名称使用驼峰式而不是kebab式。因此，在设置弯曲方向时，请使用：

el.style.flexDirection = "row";

创建一个按钮以在样式的行和列之间切换弹性方向

2 个答案: