0

não sei se e possível, procurei e não achei nada a respeito, apenas o contrario.

Por exemplo, crio um elemento no JS:

btnFormula.addEventListener('click' , ()=> {

        let t = document.createElement('div');
        t.setAttribute('class' , 'caixa');
        t.setAttribute('id' , 'caixa');
        t.style.height ="200px";
        t.style.width ="200px";
        t.innerHTML = "FORMULA QUADRADA"
        t.style.border = "1px solid black"
        papermain.appendChild(t);
        papermain.appendChild(exitT);
        // DEPOIS fazer mais formulas e alterar para um select no HTML*
    });

Agora em vez de utilizar elemento.style.atributo = ... e possível alterar esse elemento especifico criado no Javascript no documento CSS? a ideia e diminuir o código

#caixa {
background-color: red;
}
.caixa {
background-color: red;
}

lembrando que sao vários elementos específicos no javascript para serem editados no CSS tentei criar o atributo class e edita-lo no css mas não funciona

se não for possível desculpem a ignorância.

1
  • Esclareça a pergunta, você está procurando saber se há uma DOM-Tree para CSS assim com há DOM-Tree para HTML? Caso seja a pergunta existe sim um CSS Object Model. 30/08/2022 às 15:17

1 Resposta 1

0

Não entendi muito bem o que você quer
mas dá pra "diminuir" (acho que diminuir nem tanto, mas é mais limpo) o código assim:

btnFormula.addEventListener('click' , ()=> {
    t.classList.add('caixa');
    t.id = 'caixa';
    t.innerText = 'FORMULA QUADRADA';
    t.style = 'height: 200px; width: 200px; border: 1px solid black;';
    papermain.appendChild(t);
    papermain.appendChild(exitT);
    // DEPOIS fazer mais formulas e alterar para um select no HTML*
});

Quando quiser adicionar, remover ou verificar se uma classe existe, use o classList:

seuElemento.classList.add() = adiciona uma classe
seuElemento.classList.remove() = remove uma classe
seulemento.classList.contains() = verifica se a classe existe

caso queira saber mais sobre o classList, dá uma procurada depois.

Outra alternativa, você pode criar classes para os elementos que você vai criar e quando criar, você adiciona a classe com o classList.add() e o css será aplicado no elemento.

Exemplo:

const button = document.createElement("button");
button.classList.add("button"); // adicionando a classe ".button" no elemento - os estilos serão aplicados a este elemento.
button.innerText = 'Hello, world!';
document.body.appendChild(button);
.button {
  color: #fff;
  text-transform: uppercase;
  background: #000;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #000;
}

3
  • Se você gostaria de editar o arquivo style.css e mudar classes, ids, etc, isso não é possível (eu acho) e mesmo que seja possível, não deve ser uma boa prática. Recomendado é criar classes para os elementos que vc irá ter na página e adicionar, remover e etc a classe quando necessário.
    – Sr.Caveira
    13/08/2022 às 9:50
  • Então seria isso, criar o elemento "x" no JS e depois editar seus atributos, tamanho, cor, etc deste elemento CRIADO NO JAVASCRIPT no CSS, somente e se ele for criado. se quiser te mostro o projeto no GitHub, mas acredito que realmente não tem como. 18/08/2022 às 22:55
  • mas você já me deu uma boa sugestão de como reduzir o código, agradeço muito. 18/08/2022 às 22:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .