Как можно через select выбрать стиль border-a для блока?

Question

[Андрей]

<select id="border_style" onchange='findOption(this)'>
        <option value="dotted">Dotted</option>
        <option value="dashed">Dashed</option>
        <option value="solid">Solid</option>
        <option value="double">Double</option>
        <option value="groove">Groove</option>
        <option value="ridge">Ridge</option>
        <option value="inset">Inset</option>
        <option value="outset">Outset</option>
    </select></section>
<center><div style="background-color: antiquewhite; width: 50px; height: 50px;" id="div"></div></center>

let div = document.getElementById('div');//Сам блок
function findOption(select) {
   const option = select.querySelector(`option[value="${select.value}"]`)
   div.style.border = '1px'+select.value+ 'red';
}

Answer 1

[Alex_mos]

<select id="border_style" >
        <option value="dotted">Dotted</option>
        <option value="dashed">Dashed</option>
        <option value="solid">Solid</option>
        <option value="double">Double</option>
        <option value="groove">Groove</option>
        <option value="ridge">Ridge</option>
        <option value="inset">Inset</option>
        <option value="outset">Outset</option>
    </select></section>
<center><div style="background-color: antiquewhite; width: 50px; height: 50px;" id="div"></div></center>

let div = document.getElementById('div');//Сам блок
var select = document.getElementById("border_style");

select.addEventListener('change', ()=>{
  div.style.border = `1px ${select.value} red`
})

что то я не в ладах с codepen пока))))

Comments

[Андрей]

Оооо, спасибо, а не подскажете ли, как можно получить цвет который выбрал пользователь в ?

Answer 2

[Ankhena]

На мой взгляд через кастомные свойства это делать заметно приятнее.

code

const div = document.getElementById('div'); //Сам блок
const select = document.getElementById("border_style");

select.addEventListener('change', () => {
  div.style.setProperty('--border-style', select.value)
})

<select id="border_style">
  <option value="dotted">Dotted</option>
  <option value="dashed">Dashed</option>
  <option value="solid">Solid</option>
  <option value="double">Double</option>
  <option value="groove">Groove</option>
  <option value="ridge">Ridge</option>
  <option value="inset">Inset</option>
  <option value="outset">Outset</option>
</select>

<div id="div"></div>

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}


#div {
  --border-color: red;
  --border-style: dotted;
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  border: 3px var(--border-style) var(--border-color);
  background: antiquewhite;
}