Alguns videos atrás, eu apresentei esse conceito de selecionar elementos e depois manipulá-los.
Então, selecionamos um H1 ou todas as tags de imagem e então podemos mudar a cor ou animá-las ou fazê-las fazer
algo quando você clica nelas.
Até agora, nós só cobrimos a metade de seleção e esse vídeo.
Vamos apresentar algumas das várias maneiras de manipular elementos uma vez que os selecionamos.
Então, aqui estão as quatro coisas principais das quais eu quero falar.
O primeiro é como mudamos um estilo de elemento.
Como torná-lo azul ou fazê-lo esconder.
Altere o tamanho da fonte.
Em seguida, falaremos sobre adicionar e remover classes com javascript e, em seguida, alterar o conteúdo de
uma etiqueta.
Então, como eu altero o texto dentro de uma marca H-1, por exemplo.
E, finalmente, alterar os atributos.
Então, como mudamos a fonte em uma marca de imagem ou a referência em uma etiqueta AA.
Vamos começar a falar sobre a propriedade de estilo.
estilo é um objeto enorme, centenas de propriedades um para cada propriedade CSSA que poderíamos definir.
Então, quando o DOM é construído e um nó individual é feito ou um objeto é feito para cada
elemento, existe uma propriedade chamada estilo e a propriedade de
Então, podemos escrever javascript que irá então estilo e elemento de forma diferente.
Então, aqui, eu estou selecionando um elemento por seu ressalto Id, então selecione-o, salve-o em uma variável chamada tag
e depois manipule-a.
E o que estou fazendo está configurando.
Tag ponto estilo ponto cor para ser azul tag ponto estilo ponto fronteira é igual a 10 pixels sólido vermelho.
É importante notar que o lado direito deve ser uma string.
Então, embora em C Ss não precisamos colocar citações em torno de azul ou em torno de 70 P x.
Isso não é C Ss.
Isso é javascript.
Portanto, ainda temos que seguir as regras regulares de javascript.
Então eu tenho uma página web simples configurada que eu vou usar para demonstrar algumas dessas propriedades.
Então, esta página da web é super simples apenas um H-1 um parágrafo em vez desse parágrafo.
Há uma marca forte e, em seguida, duas imagens de duas mixagens corgi adoráveis.
Cônsul e eu preciso começar selecionando algo e eu vou mudar a cor e a borda deste H-1.
Então, o que eu vou fazer é ir ao
Então eu preciso selecioná-lo e há várias maneiras de fazer isso em um novo documento
que consulta o seletor H-1.
E então vou mostrar-lhe o estilo H-1, que é um objeto gigante toneladas e toneladas de propriedades.
Então eu vou tentar mudar um deles como a cor escura do estilo H-1 e torná-lo amarelo.
E você pode vê-lo imediatamente mudado para amarelo.
A mesma coisa com a borda H-1 que o estilo que a borda é igual, vamos fazer cinco pixels de rosa sólido.
E nós vamos lá.
Então, é claro, se nós queríamos que isso fosse amarelo com uma borda rosa.
A partir do momento em que a página carregada, não há motivo para usar o javascript para fazer isso.
Nós simplesmente colocamos isso em nosso arquivo CSSA, usamos o javascript se quisermos que ele se torne amarelo e tenha
uma borda cor-de-rosa quando o usuário estiver na página por cinco segundos ou se ele quisesse que acontecesse quando o usuário
rolou para uma parte específica de A página ou o usuário clicaram em algo.
Trata-se de tornar as coisas interativas e veremos como fazer isso em breve.
de estilo é que, se você se encontrar manipulando um monte de arquivos em
um elemento individual, como estou fazendo aqui e mudando cinco propriedades diferentes nesta marca, definitivamente há uma maneira melhor.
Bem, a coisa legal sobre o uso da propriedade
E há algumas razões pelas quais há uma maneira melhor.
O primeiro é que este não é um código muito seco.
Há muito estilo rotulado com estilo marcado repetido.
Mais importante, porém, esse conceito é chamado de separação de preocupações.
Portanto, a separação de preocupações é esse conceito de que nossos H M L R C S s não são javascript.
Cada um é responsável por seu próprio domínio pequeno e não queremos isso.
Nós não queremos muito cruzamento entre eles.
Então, neste diagrama, você pode ver que há um pouco de cruzamento entre cada equipe com qual é
a estrutura e javascript que é esse comportamento e, em seguida, ver avaliar é a apresentação.
E há uma pequena sobreposição com H html javascript, mas lembre-se de que costumava ser antes de
C Ss surgir, você precisava escrever seus estilos individualmente em cada elemento em que realmente usamos o atributo
de estilo.
Nesse caso, nossa apresentação o estilo foi realmente tecido na estrutura e com C Ss
agora os separamos.
Assim, o nosso HMO é uma estrutura pura e, em seguida, o nosso sucesso é um estilo puro.
Então, o que o javascript se encaixa é que ele deve controlar o comportamento de uma página
e às vezes isso significa mudar a aparência das coisas, e não apenas mudar as propriedades dentro do javascript,
na verdade, fazer o estilo no javascript.
O que podemos fazer é ativá-los e desligar dentro do arquivo CSSA.
Portanto, um dos padrões que é muito comum é que definimos uma classe CSSA como um destaque e que a classe de
destaque terá cinco ou seis ou, no entanto, muitas propriedades diferentes que estamos mudando.
E, então, podemos selecionar um elemento com javascript e dar-lhe essa classe de destaque.
Então, em Javascript com uma linha, podemos adicionar uma classe que mudará cinco propriedades diferentes.
Vamos dar uma olhada em como isso seria implementado em Javascript.
Então, ao invés de selecionar uma tag e, em seguida, alterar o estilo, mas a cor para ser azul e, em seguida,
denominada borda para ser 10 pixels de vermelho sólido, o que poderíamos fazer é encontrar uma classe naquela classe poderia ser chamada qualquer coisa.
Normalmente, você quer que seja um pouco significativo, então reflete o que a classe deveria fazer.
É algo que está sendo destacado ou é uma resposta correta.
Uma pontuação alta por qualquer motivo que você está aplicando a classe tentando apresentar um bom nome.
Então, este não é um bom nome, mas algumas classes algumas classes estão mudando a cor para ser azul e com
10 pixels de vermelho sólido.
Então, tudo o que tenho a fazer é selecionar minha tag e, em seguida, marcar ponto da lista de pontos da classe adicionar alguma classe
e isso dará a minha tag com a ideia de destacar uma nova classe chamada alguma classe em todos
esses estilos será aplicada.
Há algumas outras coisas que podemos fazer com a lista de aulas.
Então, neste exemplo, mostro três métodos que já vimos, que é como podemos adicionar uma classe de remoção, que leva um
nome de classe e ele remove esse nome de classe da lista de classes e, em seguida, a lista de
classe que é extremamente útil.
É preciso um nome de classe.
E se o elemento dado já tiver essa classe, ele o removerá se o elemento não tiver essa
classe, então eu vou ativá-lo.
Então, muito muito útil.
Vamos usar isso o tempo todo mais tarde.
Então, deixe-me demonstrar isso para você antes de voltar para o meu exemplo aqui.
Na verdade, vou definir uma nova classe.
Então, ao invés de fazer uma nova folha de estilo e usar um link, eu apenas vou usar uma etiqueta de estilo apenas por causa
do tempo.
Então eu vou definir uma classe que você vai chamar de grande.
E o que eu vou fazer é mudar o tamanho da fonte para 100 pixels e mudar a cor para ser laranja.
E, finalmente, vamos dar uma borda de cinco pixels de vermelho sólido.
Então vou deixar isso.
Se eu atualizar minha página nada muda, é claro, mas quando eu quero fazer é aplicar essa classe a algo.
Então, vou fazer com que este parágrafo tenha a grande classe para fazer isso, eu preciso selecioná-lo até agora.
Parágrafo igual ao documento que consulta o seletor do parágrafo.
ESTÁ BEM.
E vamos começar por dar uma olhada na lista de aulas e você pode ver que está vazio.
Ainda não existem classes atribuídas a este parágrafo.
Então, se eu quiser atribuir um tudo o que eu preciso fazer é dizer que a P-Dub classe lista ponto adicionar e eu quero adicionar
a classe grande.
E nós vamos lá.
Então ele reflete automaticamente as novas mudanças na minha folha de estilo.
Tudo o que eu tinha que fazer era adicionar a grande classe.
Então, espero que você veja que isso é muito mais fácil e que estamos separando as responsabilidades.
Então, tudo o que é javascript faz é ligar ou desligar uma parte específica do SS em
vez de realmente manipular manualmente as propriedades individuais.
Agora, estamos mudando as coisas o mínimo possível em vez do nosso Javascript.
Então, se eu quiser remover tudo o que eu preciso fazer é fazer classe sem classe, não remover grande e meu favorito
que eu mencionei é super útil é alternar.
Então, se eu acertar toggle agora e pressione enter, não há nenhuma classe atribuída para que ele atribua a
classe grande.
Agora grande já foi atribuído para que ele o remova.
Então, isso é útil, obviamente, não neste caso, para tornar essa laranja louca em uma classe de fonte enorme, mas o que podemos fazer
é algo como uma lista de tarefas se quisermos que o usuário possa clicar nela para fazer.
E isso vai acabar com isso.
Mas eles podem clicar de novo e, em seguida, serão desacelerados ou simplesmente voltarão ao normal.
Isso seria feito.
Ou nós poderíamos fazê-lo alternando uma aula para que possamos ter uma classe chamada concluída e eu clicar clic
aplicado novamente.
É removido.
Esse é apenas um exemplo de quando você pode usar alternar.
Mas é realmente muito útil.
O último ponto que vou abordar sobre a lista de aulas é que, tecnicamente, não é uma matriz.
Então, isso significa que temos que usar um anúncio para adicionar uma classe.
Não podemos fazer algo como empurrar.
Então, apenas uma nota menor, mas é importante saber que não é tecnicamente uma matriz.
Então, abordamos duas formas diferentes de manipular o estilo através do nosso javascript.
uma propriedade de cada vez, o que é honestamente bom se você está apenas fazendo uma ou duas coisas.
O primeiro está fazendo manualmente
Mas se você está fazendo isso em um lote ou está fazendo isso em vários elementos, é muito melhor o
estilo mais convencional para usar uma classe e simplesmente ativar ou desativar a classe