<p>Значення(ключові слова) для властивості <code>display</code>, які найчастіше використовуються:</p>
<hr>
<select id="form">
  <option value="block">block</option>
  <option value="inline-block">inline-block</option>
  <option value="inline">inline</option>
  <option value="none">none</option>
</select>
<hr>

<div id="block">
  Тестовий блок
</div>
#block {
  font-family: momospace;
  background-color: #eee;
  border: 2px solid #666;
  padding: 16px;
  text-align: center;
  color: #222;
  margin-top: 36px;
}
var block = document.getElementById('block');
var form = document.getElementById('form');

form.onchange = function() {
  for (var i = 0; i < form.options.length; i++) {
    if (form.options[i].selected == true) {
      block.style.display = form.options[i].value;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.