javascript - 将面板大小调整为 col-md-6

Question

我在学习编码方面还很陌生，我只是在玩一些东西。我有一个面板，上面有一个按钮来调整面板的大小。

这是我的代码：

var panel = document.getElementById("panel");

function panelResize() {
  if (panel.style.width >= "75%") {
    panel.style.width = "50%";
  } else {
    panel.style.width = "75%";
  }
}

<button style="margin:10px" onclick="panelResize()">button</button>

<div class="col-md-12">
  <div class="col-md-6" id="panel">
    <div class="panel panel-default">
      <div class="panel-heading">
        <p>panel heading</p>
      </div>
      <div class="panel-body">
        <p>panel body</p>
      </div>
    </div>
  </div>
</div>

我知道这段代码可能不是 100%，所以我很抱歉。

我希望按钮能够将面板的宽度增加到col-md-8例如，然后如果可能的话返回到col-md-6相同的按钮。

标签： javascripthtmlbuttoncol

Answer 1

你可以这样做

var panel = document.getElementById("panel");
if(panel.classList.contains('col-md-6')){
    panel.classList.remove('col-md-6');
    panel.classList.add('col-md-8');
} else {
   panel.classList.remove('col-md-8');
   panel.classList.add('col-md-6');
}