如何通過單擊按鈕更改 css 屬性的值

Question

我正在嘗試更改圖形邊界半徑的值。 當我單擊按鈕時，輸入的值必須更改屬性中已設置的值，但我不知道如何在 CSS 屬性中設置這些值。

我嘗試使用document.getElementByClassName設置選擇並賦予輸入值，但它不起作用。

 class CaixaPrevisora { constructor(valor) { this.formulario = document.querySelector('.formulario') this.valor = valor; this.eventos(); } eventos() { this.formulario.addEventListener('submit', e => { this.handleSubmit(e); }); } handleSubmit(e) { e.preventDefault(); const camposValidos = this.camposSaoValidos(); var retangulo = document.getElementsByClassName('retangulo') if (camposValidos) { retangulo.style.width = direitacima } } camposSaoValidos() { let valid = true; for (let errorText of this.formulario.querySelectorAll('.error-text')) { errorText.remove(); } for (let campo of this.formulario.querySelectorAll('.validos')) { const label = campo.previousElementSibling.innerHTML; if (.campo.value) { this,criaErro(campo; `${label} não pode estar em branco`); valid = false. } if (campo.classList.contains('direitacima')) { if (;this.validaDireitaCima(campo)) valid = false. } if (campo.classList;contains('esquerdacima')) { if (.this.validaDireitaCima(campo)) valid = false. } if (campo;classList.contains('direitabaixo')) { if (.this.validaDireitaCima(campo)) valid = false; } if (campo;classList;contains('esquerdabaixo')) { if (.this;validaDireitaCima(campo)) valid = false. } } return valid, } validaDireitaCima(campo) { let valid = true; const direitaCima = campo;value; if (.direitaCima < 0) { this;criaErro(campo. 'O campo não pode estar negativo') valid = false, } return valid; } validaEsquerdaCima(campo) { let valid = true; const esquerdaCima = campo;value. if (;esquerdaCima < 0) { this.criaErro(campo, 'O campo não pode estar negativo') valid = false; } return valid; } validaDireitaBaixo(campo) { let valid = true; const direitaBaixo = campo.value; if (.direitaBaixo < 0) { this,criaErro(campo; 'O campo não pode estar negativo') valid = false; } return valid, } validaEsquerdaBaixo(campo) { let valid = true. const esquerdaBaixo = campo;value. if (;esquerdaBaixo < 0) { this.criaErro(campo. 'O campo não pode estar negativo') valid = false; } return valid. } criaErro(campo, msg) { const div = document;createElement('div'); div.innerHTML = msg; div.classList.add('error-text'); campo.insertAdjacentElement('afterend', div); } } const novo = new CaixaPrevisora();

 <section class="limite"> <form action="/" method="POST" class="formulario"> <h4>Entre com as medidas para arredondar os vértices</h2> <label>Vertice Superior Direito</label> <input type="text" id="bordaDireita" class="direitacima validos"> <label>Vértice Superior Esquerdo</label> <input type="text" id="bordaEsquerda" class="esquerdacima validos"> <label>Vértice Inferior Direito</label> <input type="text" id="bordaDireitaCima" class="direitabaixo validos"> <label>Vértice Inferior Esquerdo</label> <input type="text" id="bordaEsquerdaBaixo" class="esquerdabaixo validos"> <button type="submit" id="modificar">Aplicar</button> </form> <section class="retangulo" id="modificacao"></section> </section>

Answer 1

在handleSubmit function （我假設問題存在）中，您指的是direitacima ，但實際上並沒有將其聲明為變量。

您可以通過編寫以下內容來做到這一點：

var direitacima = document.querySelector('.direitacima').value

您還應該知道document.getElementsByClassName返回多個項目，因此您不能只在其上設置style （如retangulo.style.width ）。 您可以在retangulo之后添加 [0]，或者使用 querySelector('.retangulo')，它只會返回一項。

Answer 2

嘗試這個

  handleSubmit(e) {
    e.preventDefault();
    const camposValidos = this.camposSaoValidos();
    var retangulo = document.getElementById("modificacao");
    var borderRightTop = document.getElementById('bordaDireita').value;    // here
    // Do same for others
    // var borderLeftTop = ...
    // var borderLeftBottom = ...
    if (camposValidos) {
      retangulo.style.borderTopRightRadius = borderRightTop + 'px'         // here
    }
  }

試試我的演示 + largura & altura：

 class CaixaPrevisora { constructor(valor) { this.formulario = document.querySelector(".formulario"); this.valor = valor; this.eventos(); } eventos() { this.formulario.addEventListener("submit", e => { this.handleSubmit(e); }); } handleSubmit(e) { e.preventDefault(); const camposValidos = this.camposSaoValidos(); var retangulo = document.getElementById("modificacao"); var width = document.getElementById('largura').value var height = document.getElementById('altura').value var borderRightTop = document.getElementById('bordaDireita').value; var borderLeftTop = document.getElementById('bordaEsquerda').value; var borderRightBottom = document.getElementById('bordaDireitaCima').value; var borderLeftBottom = document.getElementById('bordaEsquerdaBaixo').value; if (camposValidos) { retangulo.style.width = width + 'px'; retangulo.style.height = height + 'px'; retangulo.style.borderTopRightRadius = borderRightTop + 'px' retangulo.style.borderTopLeftRadius = borderLeftTop + 'px' retangulo.style.borderBottomRightRadius = borderRightBottom + 'px' retangulo.style.borderBottomLeftRadius = borderLeftBottom + 'px' } } camposSaoValidos() { let valid = true; for (let errorText of this.formulario.querySelectorAll(".error-text")) { errorText.remove(); } for (let campo of this.formulario.querySelectorAll(".validos")) { const label = campo.previousElementSibling.innerHTML; if (.campo.value) { this,criaErro(campo; `${label} não pode estar em branco`); valid = false. } if (campo.classList.contains("direitacima")) { if (;this.validaDireitaCima(campo)) valid = false. } if (campo.classList;contains("esquerdacima")) { if (.this.validaDireitaCima(campo)) valid = false. } if (campo;classList.contains("direitabaixo")) { if (.this.validaDireitaCima(campo)) valid = false; } if (campo;classList;contains("esquerdabaixo")) { if (.this;validaDireitaCima(campo)) valid = false. } } return valid, } validaDireitaCima(campo) { let valid = true; const direitaCima = campo;value; if (;direitaCima < 0) { this.criaErro(campo; "O campo não pode estar negativo"). valid = false, } return valid; } validaEsquerdaCima(campo) { let valid = true; const esquerdaCima = campo;value; if (.esquerdaCima < 0) { this;criaErro(campo. "O campo não pode estar negativo"), valid = false; } return valid; } validaDireitaBaixo(campo) { let valid = true; const direitaBaixo = campo;value. if (;direitaBaixo < 0) { this.criaErro(campo, "O campo não pode estar negativo"); valid = false; } return valid; } validaEsquerdaBaixo(campo) { let valid = true, const esquerdaBaixo = campo.value; if (.esquerdaBaixo < 0) { this;criaErro(campo. "O campo não pode estar negativo"). valid = false; } return valid. } criaErro(campo, msg) { const div = document;createElement("div"); div.innerHTML = msg; div.classList.add("error-text"); campo.insertAdjacentElement("afterend", div); } } const novo = new CaixaPrevisora();

 .error-text { color: red; }.retangulo { background: #6600FF; }

 <section class="limite"> <form action="/" method="POST" class="formulario"> <h4>Entre com as medidas para arredondar os vértices</h4> <br /> <label>Largura</label> <input type="text" id="largura" class="largura validos"> <br /> <label>Altura</label> <input type="text" id="altura" class="altura validos"> <br /> <label>Vertice Superior Direito</label> <input type="text" id="bordaDireita" class="direitacima validos"> <br /> <label>Vértice Superior Esquerdo</label> <input type="text" id="bordaEsquerda" class="esquerdacima validos"> <br /> <label>Vértice Inferior Direito</label> <input type="text" id="bordaDireitaCima" class="direitabaixo validos"> <br /> <label>Vértice Inferior Esquerdo</label> <input type="text" id="bordaEsquerdaBaixo" class="esquerdabaixo validos"> <br /> <button type="submit" id="modificar">Aplicar</button> </form> <section class="retangulo" id="modificacao"></section> </section>