Tenho o seguinte formulário:
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<button>GERAR</button>
Nele o usuário seleciona o valor da largura da borda no seguinte bloco:
<div class="forma"></div>
Criei o método gerar()
const gerar = _ => {
let widths = [];
cps.forEach(c => widths.push(`${c.value}px`));
frm.style.borderStyle = 'solid';
frm.style.borderWidth = widths.join(' ');
};
o qual percorre o objeto cps
e adiciona seu valor no objeto widths
, depois define a propriedade borderWidth
com os valores do objeto widths
.
Até aqui tudo bem, como pode ser visto abaixo o código funciona normalmente.
let btn = document.querySelector('button');
let cps = document.querySelectorAll('[type="number"]');
let frm = document.querySelector('.forma');
const gerar = () => {
let widths = [];
cps.forEach(c => widths.push(`${c.value}px`));
frm.style.borderStyle = 'solid';
frm.style.borderWidth = widths.join(' ');
};
btn.onclick = gerar;
input[type="number"] {
width: 40px;
}
.forma {
height: 100px;
margin: 14px;
width: 100px;
}
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<input type="number" min="0" value="0" />
<button>GERAR</button>
<div class="forma"></div>
O problema
Um desses campos, poderá ter seu valor maior que os outros, ex: 0 10 60 10 / 50 20 20 40.
Tenho que definir a propriedade borderColor
e o campo que tiver seu valor maior, terá a cor diferente, ex:
0 10 60 10 = "transparent #f7f7f7 #069 #f7f7f7"
50 20 20 40 = "#069 #f7f7f7 #f7f7f7 #f7f7f7"
Como posso resolver ?