You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/08-styles-and-classes/article.md
+7-11Lines changed: 7 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,7 +29,7 @@ Alterar uma classe é uma das ações mais utilizadas em scripts.
29
29
30
30
Antigamente, havia uma limitação no JavaScript: uma palavra reservada como `"class"` não poderia ser uma propriedade de objeto. Esta limitação não existe hoje, porém naquela época era impossível haver uma propriedade `"class"`, como `elem.class`.
31
31
32
-
Portanto, para classes, uma propriedade semelhante, `"className"`, foi introduzida: o `elem.className` corresponde ao atributo `"class"`.
32
+
Portanto, para classes, uma propriedade semelhante, `"className"`, foi introduzida: o `elem.className` corresponde ao atributo `"class"`.
33
33
34
34
Por exemplo:
35
35
@@ -57,12 +57,12 @@ Por exemplo:
57
57
document.body.classList.add('article');
58
58
*/!*
59
59
60
-
alert(document.body.className); // class article da página principal
60
+
alert(document.body.className); // class article da página principal
61
61
</script>
62
62
</body>
63
63
```
64
64
65
-
Então, podemos manipular tanto a string de classes completa usando `className` quanto classes individuais usando `classList`. A escolha depende das nossas necessidades.
65
+
Então, podemos manipular tanto a string de classes completa usando `className` quanto classes individuais usando `classList`. A escolha depende das nossas necessidades.
66
66
67
67
Métodos de `classList`:
68
68
@@ -230,7 +230,7 @@ Por exemplo, aqui `style` não consegue ver a margem:
230
230
```
231
231
...Mas e se precisarmos, por exemplo, aumentar a margem em `20px`? Nós iriamos querer o valor atual dela.
232
232
233
-
Existe um outro método para isso: `getComputedStyle`.
233
+
Existe um outro método para isso: `getComputedStyle`.
234
234
235
235
A sintaxe é:
236
236
@@ -280,19 +280,15 @@ Portanto, hoje em dia, `getComputedStyle` na verdade retorna o valor resolvido d
280
280
````warn header="`getComputedStyle` requer o nome completo da propriedade"
281
281
Devemos sempre solicitar a propriedade exata que queremos, como `paddingLeft`, `marginTop` ou `borderTopWidth`. Caso contrário, o resultado correto não é garantido.
282
282
283
-
<<<<<<< HEAD
284
283
Por exemplo, se existem propriedades `paddingLeft/paddingTop`, então o que deveríamos obter para `getComputedStyle(elem).padding`? Nada, ou talvez um valor "gerado" a partir de propriedades de paddings conhecidos? Não há uma regra padrão aqui.
285
284
286
-
=======
287
-
For instance, if there are properties `paddingLeft/paddingTop`, then what should we get for `getComputedStyle(elem).padding`? Nothing, or maybe a "generated" value from known paddings? There's no standard rule here.
288
-
>>>>>>> d78b01e9833009fab534462e05c03cffc51bf0e3
289
285
````
290
286
291
287
```smart header="Os estilos aplicados a links `:visited` são ocultados!"
292
288
293
289
Links visitados podem ser coloridos usando a pseudo-classe CSS `:visited`.
294
290
295
-
No entanto, `getComputedStyle` não dá acesso a essa cor, pois, caso contrário, uma página arbitrária poderia descobrir se o usuário visitou um link ao criá-lo na página e verificar os estilos.
291
+
No entanto, `getComputedStyle` não dá acesso a essa cor, pois, caso contrário, uma página arbitrária poderia descobrir se o usuário visitou um link ao criá-lo na página e verificar os estilos.
296
292
297
293
O JavaScript pode não conseguir visualizar os estilos aplicados pela pseudo-classe `:visited`. Além disso, existe uma limitação no CSS que proíbe a aplicação de estilos que alteram a geometria em `:visited`. Isso garante que não haja uma maneira indireta de uma página mal-intencionada testar se um link foi visitado e, assim, quebrar a privacidade.
298
294
```
@@ -308,8 +304,8 @@ Para modificar os estilos:
308
304
309
305
- A propriedade `style` é um objeto com estilos em camelCase. Ler e escrever nela tem equivale a modificar propriedades individuais no atributo `"style"`. Para ver como aplicar `important` e outras coisas raras há uma lista de métodos no [MDN](mdn:api/CSSStyleDeclaration)
310
306
311
-
- A propriedade `style.cssText` corresponde a atributo `"style"` inteiro, a string completa de estilos.
307
+
- A propriedade `style.cssText` corresponde a atributo `"style"` inteiro, a string completa de estilos.
312
308
313
309
Para ler os estilos resolvidos (considerando todas as classes, após a aplicação de todo o CSS e cálculo dos valores finais):
314
310
315
-
- A função getComputedStyle(elem, [pseudo]) retorna um objeto que contém os estilos finais do elemento, e é somente leitura.
311
+
- A função getComputedStyle(elem, [pseudo]) retorna um objeto que contém os estilos finais do elemento, e é somente leitura.
0 commit comments