Résumé des méthodes de modification des styles CSS dans les compétences JavaScript_javascript

JavaScript vous permet de modifier les styles CSS à la volée, afin que vous puissiez attirer l'attention de l'utilisateur sur l'endroit où vous souhaitez qu'il se concentre et offrir une meilleure expérience interactive.

Il existe 4 façons de modifier le CSS à l'aide de JavaScript :

Modifier le style du nœud (style en ligne) ;
Changer la classe ou l'identifiant du nœud ; Écrivez un nouveau CSS
Remplacez la feuille de style dans la page.

Personnellement, je ne recommande pas d'utiliser les deux dernières méthodes. Presque toutes les fonctions peuvent être réalisées via les deux premières méthodes, et le code est plus clair et plus facile à comprendre.

Je parlerai également de la façon d'obtenir le style réel de l'élément et des précautions sous une forme plus tard.

1. Modifier le style du nœud (style en ligne)

Cette méthode a le poids le plus élevé. Elle est écrite directement sur l'attribut de style du nœud. Elle remplacera le style défini par les autres méthodes. Comment l'utiliser est très simple :

var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏

Mais il convient de noter que certains noms de styles CSS sont composés de plusieurs mots, comme font-size, background-image, etc. Ils sont tous reliés par des tirets (-). Cependant, en JavaScript, les tirets signifient « moins ». " , et ne peut donc pas être utilisé comme nom d'attribut. Nous devons utiliser "camelCase" pour écrire les noms d'attributs, tels que fontSize, backgroundImage.

Notez également que de nombreux styles ont des unités et ne peuvent pas recevoir uniquement un numéro. Par exemple, les unités de fontSize incluent px, em, % (pourcentage), etc.

Cette méthode viole le principe de séparation des performances et du comportement. Elle ne convient généralement que pour définir des styles en temps réel (liés au comportement) d'éléments qui changent fréquemment. Par exemple, un div qui peut être utilisé pour faire glisser changera. son haut et sa gauche lorsqu'il est déplacé. Les attributs changent constamment. Pour le moment, ils ne peuvent pas être définis par une classe ou d'autres méthodes. En utilisant cette méthode, le style peut être modifié à la volée et remplacer d'autres paramètres.

2. Changer de classe et d'identifiant

id et class sont des "hooks" pour définir les styles. Après les modifications, le navigateur mettra automatiquement à jour le style de l'élément.

La méthode de changement d'identifiant est similaire à celle de class, mais personnellement, je ne recommande pas de l'utiliser de cette façon car id est utilisé pour localiser des éléments, il est préférable de ne pas l'utiliser pour définir le style d'affichage des éléments, et id. est souvent utilisé comme hook JavaScript. Peut provoquer des erreurs inutiles.

En JavaScript, class est un mot-clé réservé, utilisez donc className comme attribut pour accéder à la classe de l'élément, par exemple :

.redColor{
 color: red;
}
.yellowBack{
 background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class

Mais ce qui est plus déprimant, c'est que cet attribut est une chaîne contenant toutes les classes de l'élément. Toutes les classes sont séparées par des espaces, ce qui rend très gênant la suppression de classes (il suffit de les ajouter, d'établir simplement une connexion par chaîne entre elles) , mais pensez à ajouter un espace devant~).

J'ai utilisé des expressions régulières lors de la suppression, et j'ai supprimé la classe en fonction de ses différentes positions dans la chaîne (tête, queue, milieu), mais j'ai ensuite pensé à une meilleure façon, qui consiste à supprimer la classe au début et à la fin. de l'attribut className. Ajoutez un espace à chacun, et tout devient alors la méthode du milieu, remplaçant directement la sous-chaîne :

//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}

Il est préférable d'utiliser cette méthode pour les modifications générales du style. Définir le style CSS. JavaScript émet uniquement des instructions pour les changements de style. La définition spécifique du style est toujours laissée au CSS.

Les deux dernières méthodes ne sont ni élégantes ni présentent certains problèmes de compatibilité, je ne les présenterai donc pas~

3. Obtenez le vrai style

La première chose à préciser est qu'il n'est pas possible d'utiliser element.style. Il ne peut obtenir que des styles en ligne et les définitions de la feuille de style ne peuvent pas être obtenues.

Étant donné que le style d'un élément peut être défini à de nombreux endroits, il est difficile de dire à quoi ressemble son style réel. Existe-t-il un moyen d'obtenir le style réel de l'élément affiché dans le navigateur ?
En fait, Microsoft et le W3C fournissent des méthodes correspondantes. Il suffit de les encapsuler pour les utiliser :

//获取元素样式
function getRealStyle(element,styleName){
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];//IE
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(element,null)[styleName];//W3C
}
return realStyle;
}

N'oubliez pas que le styleName transmis est au "format camel case"~~

4. Afficher et masquer les formulaires (ne pas abuser du CSS)

Nous voyons souvent certaines options de formulaire ajoutées dynamiquement. Par exemple, si vous sélectionnez « Marié » comme état civil dans un formulaire, il y aura une zone de saisie supplémentaire pour vous permettre de saisir le nom de votre conjoint.

S'il n'y a pas de choix, alors bien sûr, vous devez masquer tous les formulaires liés au « conjoint », mais vous ne devez pas utiliser CSS pour le résoudre pour le moment, c'est-à-dire que vous ne pouvez pas utiliser style.display="none" pour le cacher.

Parce que peu importe que vous la masquiez ou non, la zone de saisie est là, ni croissante ni décroissante~ [Halo] Pour parler franchement, bien qu'elle soit masquée, elle existe toujours dans le DOM Si l'utilisateur soumet le formulaire à. cette fois, le contenu de cette zone de saisie masquée sera soumis ensemble et des erreurs inattendues peuvent survenir~

La bonne approche consiste à placer ce contenu dans l'hyperespace DOM, afin qu'il n'y ait pas de problèmes ci-dessus.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.