Como modificar as classes CSS em JavaScript

Qualquer desenvolvedor da web inicia sua jornada aprendendo HTML, CSS e JavaScript. O HTML fornece estrutura para nossas páginas da web, o JavaScript é uma linguagem de programação da web que nos dá a capacidade de interagir com os usuários, enquanto o CSS nos dá a capacidade de estilizar nossos aplicativos e páginas da Web da Web. Para manipular e trabalhar com as classes CSS, o JavaScript nos oferece Lista de classe e nome da classe propriedades que podem ser usadas para manipular o atributo de classe.

O nome da classe pode ser usado por JavaScript para manipular o elemento especificado, enquanto o CSS usa esse nome de classe para estilizar esse elemento. Portanto, neste post, examinaremos como modificar as classes CSS em JavaScript, mas primeiro vamos definir o ambiente, inicializando elementos no HTML e depois estilizando esse elemento no CSS.

Ambiente configurado

Vamos criar um elemento div que funcione como um contêiner e coloque dois elementos dentro deste contêiner. Um será o H2 tag e o outro será o p marcação. Para vincular o arquivo CSS a este html, inserimos um link tag na cabeça e referenciou nosso arquivo CSS dentro do atributo href (estilo.CSS):

Inglaterra

A capital da Inglaterra é Londres

Para obter a referência do div Elemento no CSS, usamos o atributo de classe. Realizamos algum estilo no contêiner Div, bem como os elementos dentro do contêiner div.

.recipiente
Background-Color: RGB (54, 224, 207);

.contêinerh2, p
Cor: RGB (125, 104, 184);

A saída será assim:

Modificar as classes CSS

Como mencionado na parte introdutória deste artigo, o JavaScript nos oferece Lista de classe e nome da classe propriedades que podem ser usadas para manipular o atributo de classe.O nome da classe é usado para definir um valor para uma classe diretamente, enquanto usando a propriedade Classlist, podemos executar as seguintes funções:

• Lista de classe.adicionar() é usado para adicionar valores de classe
• Lista de classe.alternar() é usado para ligar ou desligar uma aula
• Lista de classe.substituir() é usado para substituir um valor de classe por outro valor de classe
• Lista de classe.contém () é usado para verificar se existe um valor ou não
• Lista de classe.remover() é usado para remover um valor de classe

Vamos passar por um exemplo para entender melhor a propriedade Classlist e seus métodos internos e usaremos o mesmo código HTML e CSS que usamos anteriormente. Primeiro, vamos usar a propriedade ClassName para atribuir uma classe ao H2 atributo. Para esse fim, referenciamos uma classe no CSS que não existe no momento e damos algum estilo mostrado abaixo:

.informações
cor de fundo: branco;
borda: 2px preto sólido;

Em seguida, obtenha a referência do H2 elemento usando o QuerySelector ('H2') que selecionará o primeiro elemento H2 no código HTML. Em seguida, use a propriedade ClassName para atribuir o informações classe para o elemento H2. O código JavaScript é fornecido abaixo:

// Selecione o primeiro elemento H2
const myh2 = documento.QuerySelector ('H2');
// defina a classe de informação como myh2
myh2.ClassName = 'Info';

Para fazer referência a este código JavaScript, use a tag de script com o atributo SRC no código HTML, fornecendo o nome do arquivo JavaScript no atributo src:

O código.JS é o nosso nome de arquivo JavaScript. Nossa página da web agora ficará assim:

Vamos agora modificar as classes CSS usando o Lista de classe propriedade. Como visto anteriormente, a propriedade Classlist nos oferece alguns métodos internos que podemos usar para modificar as classes CSS. Vamos usar o Lista de classe.adicionar() que adicionará uma aula no exemplo a seguir:

// Selecione o primeiro div
const hidediv = documento.QuerySelector ('div');
hidediv.Lista de classe.add ('oculto'); // Classe Hidden adicionada

Em seguida, vá para o arquivo CSS e inicialize a classe oculta, tornando a exibição nenhuma para que a div não fique visível:

.escondido
Mostrar nenhum;

Agora você verá que o elemento div estará oculto e você não verá nada na sua página da web:

Vamos agora usar o Lista de classe.substituir() Método em que substituiremos a classe oculta existente por outro envoltório de classe.

// Selecione o primeiro div
const hidediv = documento.QuerySelector ('div');
hidediv.Lista de classe.add ('oculto'); // Classe Hidden adicionada
hidediv.Lista de classe.substituir ('oculto', 'embrulhar'); // Substitua a classe oculta por classe de informações

Em seguida, vá para o seu arquivo CSS e estilize a classe Wrap:

.enrolar
tamanho de fonte: grande;

Agora você verá que nosso conteúdo agora está visível e o tamanho da fonte será maior do que antes:

Conclusão

O JavaScript nos oferece duas propriedades que podemos usar para modificar as classes CSS; Lista de classe e nome da classe propriedade. O nome da classe A propriedade é usada para definir um valor para uma classe CSS diretamente, enquanto o Lista de classe nos dá alguns métodos internos para manipular as classes CSS.

Por exemplo, o Lista de classe.adicionar() nos dá a capacidade de adicionar valores de classe, Lista de classe.remover() nos dá a capacidade de remover uma aula, Lista de classe.alternar() nos dá a capacidade de adicionar alternar a uma aula e o Lista de classe.substituir() nos dá a capacidade de substituir um valor de classe por outra classe.

Neste post, vimos como modificar as classes CSS usando o JavaScript aprendendo sobre duas propriedades do JavaScript; Lista de classe e nome da classe.