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;
}querySelector.<button>
preserveAspectRatio
<button type="button" data-ok="1" value="1">1</button>
<button type="button" data-ok="2" value="2">2</button>
<button type="button" data-ok="3" value="3">3</button>
<button type="button" data-ok="4" value="4">4</button>let btns = document.querySelectorAll('[data-ok]');
btns.forEach(btn => btn.addEventListener('click', (e) => console.log(e.target.dataset.ok)))Как тогда верстать, просто ссылку сделать с этой кнопкой а бэкэндер затем настроит добавление товара при клике на эту кнопку?
Вот так должно быть, растянуться содержимое, то есть выйти за границы правого блока.
prevArrow: '<button type="button" class="prev">кнопка</button>',
nextArrow: '<button type="button" class="next">другая</button>',