Remplacement CSS avec JavaScript

Question

Je suis relativement nouveau à la programmation côté client venant de PHP/MySQL environnement. Je comprends les rôles que CSS et JavaScript peuvent jouer dans l'environnement du navigateur, cependant, il semble que CSS stagne de façon irréversible sans JavaScript. Je ne veux en aucun cas créer un débat mais c'est ce que la situation me ressemble, le «novice». Alors pourquoi ne pas simplement utiliser JavaScript pour définir les attributs/propriétés des éléments? Et si oui, est-ce une pratique courante? (Je suis sûr que CSS est beaucoup plus rapide ...)

Answer 1

Quelques points généraux:

CPU Coût

exécution de JavaScript pour appliquer des styles à des éléments individuels sera incroyablement lent. Javascript est synchrone, il faudra donc mettre à jour un style à la fois. De plus, comme mentionné ailleurs, la traversée du DOM est coûteuse en calcul. Plus encore si vous appliquez des styles car vous obligez le navigateur à rendre le site à chaque fois que vous appliquez une modification.

Coût du cerveau

Il est aussi mentalement coûteux d'essayer d'écrire et de maintenir des styles en Javascript. C'est un langage fonctionnel jamais destiné à contenir les règles de mise en page. CSS est juste beaucoup plus facile à lire.

Ils sont en cascade!

CSS signifie Cascading Feuilles de style. L'un des grands avantages des styles peut hériter des propriétés les uns des autres. Considérez ce qui suit:

a.nav { font-weight: bold; } 

Maintenant, tous vos liens avec une classe de "nav" sont en gras. Mais si vous souhaitez modifier encore un lien, vous serez toujours en mesure de:

li a.nav { color: red; } 

Maintenant, tous vos liens a.nav contenus dans un élément de la liste sera rouge et gras. Il est possible de faire ceci est javascript, mais vous devrez le forcer et la maintenance serait horrible.

Si vous utilisez Javascript pour les styles vos collègues vous battront à mort!

Je pense que celui-ci parle pour lui-même genre de

Answer 2

Css est pour la mise en page et le style.

Javascript est pour le comportement.

Même s'il est possible de remplacer complètement css par javascript, ce n'est pas considéré comme une pratique courante et cela serait fortement désapprouvé par la plupart des développeurs Web. Un bon développement web suppose toujours qu'un client peut avoir javascript désactivé et fournira un paramètre par défaut gracieux. Remplacer css avec javascript peut rendre cela impossible.

Answer 3

Il est loin d'être une pratique courante, en fait, il serait probablement considéré comme une mauvaise pratique! CSS est utilisé pour définir les styles de la page et il est rendu lors du chargement de la page. Javascript entre en jeu après le chargement de la page et peut manipuler les styles et la page existants.

Si vous deviez mettre en tout JS, il serait extrêmement inefficace! La manipulation de DOM devient coûteuse si vous le faites beaucoup dans JS, et faire tous les styles en javascript au lieu de CSS serait beaucoup de manipulation. La charge sur le client serait ridicule et il y aurait probablement un retard notable dans le client comme il a essayé de faire tous ces changements. De plus, que se passe-t-il si un client a javascript désactivé? Il y a l'aspect et la convivialité de tout votre site. Pensez à CSS comme définissant l'aspect de la page et à son rendu, puis pensez à JS comme modifiant cette page après son rendu. Vous ne devriez pas pousser quelque chose dans un javascript que vous pouvez faire avec un simple style CSS à l'avance.

Answer 4

Le seul moment où vous devez utiliser JavaScript pour définir les propriétés de style est quand vous avez besoin de changer le style lors de l'exécution. Vous devriez toujours utiliser CSS pour le style, si possible, parce que:

• CSS a tendance à être mis en œuvre beaucoup plus cohérente dans les navigateurs que JS
• Un utilisateur peut avoir JS désactivé
• Le « code » pour faire Styling CSS est beaucoup plus simple, et plus facile à lire/écrire que le code JS équivalent

Answer 5

Les vrais problèmes avec la modification de votre CSS pour javascript seraient maintenabilité et performance. CSS rend très simple la recherche d'un style d'élément unique, et le modifie, sans affecter le reste de votre page. Javascript deviendrait au mieux encombrant même pour une page simple, et complètement ingérable pour une page plus complexe. Du côté des performances, à chaque fois que javascript est en cours d'exécution, votre page va "geler". Considérant une page avec 1000 éléments ayant besoin d'être mis en page, votre temps d'exécution peut facilement atteindre une minute ou plus, selon la complexité de la mise en page. CSS gérerait cela nativement, et sans aucun "gel" de votre navigateur.Cela rendrait votre page inutilisable pour la première fois qu'une personne visite, et (selon les statistiques) vous n'avez que 10 secondes pour capter l'attention de votre spectateur avant qu'il ne soit désintéressé par votre page et quitte, ce qui signifie que vous conduisez loin tous vos nouveaux visiteurs.