如何通过单击多个按钮来更改 div 大小？

Question

当有人点击相应的按钮时，我想改变 div 的大小。比如点击小按钮会使div宽度变为30%，点击中按钮会使div宽度变为50%。

我找到了这个Javascript: Change Div size on button click，但它对我不起作用，因为我不知道他的 HTML 结构，而且他使用的是 ID 而不是类。

下面是我的代码。请帮帮我：

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 300px;
}

.Button_Container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.Medium {
  margin: 0 15px;
}

.Content_Container {
  width: 100%;
  height: 150px;
  background-color: blue;
  margin-top: 30px;
}

<div class="Button_Container">
  <button class=">FULL" onclick="myFunction">FULL</button>
  <button class="Medium" onclick="myFunction">Medium</button>
  <button class="Small" onclick="myFunction">Small</button>
</div>

<div class="Content_Container"></div>

Answer 1

function myFunction(width){

var all = document.getElementsByClassName('Content_Container');
for (var i = 0; i < all.length; i++) {
  all[i].style.width = width;
}
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 300px;
}

.Button_Container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.Medium {
  margin: 0 15px;
}

.Content_Container {
  width: 100%;
  height: 150px;
  background-color: blue;
  margin-top: 30px;
}

<div class="Button_Container">
  <button class=">FULL" onclick="myFunction('100%')">FULL</button>
  <button class="Medium" onclick="myFunction('70%')">Medium</button>
  <button class="Small" onclick="myFunction('50%')">Small</button>
</div>

<div class="Content_Container"></div>