Vídeo: CSS Trigger - Mudar propriedade ao clique com CSS apenas. 2024
Assim como você pode usar o JavaScript para alterar o HTML em uma página da Web, você também pode usá-lo para alterar os estilos CSS. O processo é muito semelhante.
O primeiro passo é selecionar o elemento que deseja aplicar ou alterar um estilo. Por exemplo, para selecionar o olho esquerdo do robô, você pode usar o seguinte código:
documento. getElementById ("lefteye")
Depois de selecionar um elemento, você pode alterar seu estilo anexando a propriedade de estilo ao seletor, seguido do estilo que deseja alterar. Para alterar a cor do olho esquerdo, você pode usar este JavaScript:
documento. getElementById ("lefteye"). estilo. backgroundColor = "roxo";
Você percebe algo estranho sobre esse código? Ao alterar estilos com JavaScript, existem duas regras:
-
Quando a propriedade CSS é apenas uma palavra, como margem ou borda, você pode usar o mesmo nome CSS para alterar o estilo em JavaScript.
-
Se a propriedade CSS tiver traços (-), o nome da propriedade CSS é convertido em camelCase. Então, a cor de fundo é alterada para backgroundColor.
Aqui estão alguns exemplos de propriedades CSS e como cada propriedade está escrita em JavaScript:
| Propriedade CSS | Propriedade estilo JavaScript |
|---|---|
| cor de fundo | backgroundColor |
| border-radius | borderRadius |
| font-family | fontFamily |
| margem | margem |
| tamanho da fonte | fontSize |
largura | borderWidth |
|
| texto- alinhe | textAlign |
| cor | cor |
JavaScript se preocupa muito com a capitalização. As letras maiúsculas nas propriedades de estilo JavaScript precisam estar lá para que as propriedades funcionem.
