Uma coisa que ninguém aqui mencionou completamente é que o JavaScript (auxiliado pelo jQuery neste caso) não pode modificar diretamente a folha de estilos em cascata de um documento. O css()
método do jQuery apenas altera o conjunto de style
propriedades dos elementos correspondentes . CSS e JavaScript não têm nenhuma relação com esse aspecto.
$('.target').css('display','none');
não altera sua .target { }
declaração CSS. O que aconteceu aqui é que qualquer elemento com um class
"destino" agora se parece com isso:
<element class="target" style="display:none;"></element>
Existem efeitos colaterais causados por não pré-definir uma regra de estilo CSS? Nenhuma.
Existe uma maneira melhor de fazer isso? Em termos de desempenho, sim, existe!
Como o desempenho pode ser melhorado?
Em vez de modificar diretamente o style
elemento de cada elemento, você pode predefinir uma nova classe e adicioná-la aos elementos correspondentes usandoaddClass()
(outro método jQuery).
Com base na presente JSPerf pré-existente que compara css()
com addClass()
, podemos ver que addClass()
é realmente muito mais rápido:
Como podemos implementar isso sozinhos?
Primeiramente, podemos adicionar nossa nova declaração CSS:
.hidden {
display: none;
}
Seu HTML permaneceria o mesmo, essa classe predefinida está simplesmente no local para uso posterior.
Agora podemos modificar o JavaScript para usar addClass()
:
$('.target').addClass('hidden');
Ao executar esse código, em vez de modificar diretamente a style
propriedade de cada um dos elementos "target" correspondentes, essa nova classe agora será adicionada:
<element class="target hidden"></element>
Com a nova classe "oculta", esse elemento herdará o estilo declarado em seu CSS e seu elemento será definido para não ser mais exibido.
.css
, os estilos configurados com .css são muito difíceis de substituir sem causar outros problemas, por isso tendem a evitá-los..toggle()
, é um pouco mais curta no seu código.target
é para fins de javascript, muitas pessoas usam o prefixojs-
para essas classes, ou sejajs-target
. BTW: Alvo é uma espécie de um nome ruim;) Para ler mais, consulte: philipwalton.com/articles/decoupling-html-css-and-javascript