将面板大小调整为 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，然后如果可能的话使用相同的按钮将 return 返回到 col-md-6。

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

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

Resize panel to col-md-6

javascript

html

button

col