Résumé des méthodes JavaScript pour modifier le style, l'identifiant, la classe et d'autres attributs CSS

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 en JavaScript :

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

Presque toutes les fonctions peuvent être réalisées grâce aux 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 et elle sera remplacée. d'autres méthodes. L'ensemble de styles. L'utilisation est très simple :

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

Il faut cependant noter que certains noms de styles CSS sont composés de plusieurs mots, comme font-size, background-image, etc., et ils sont tous connectés avec des tirets (-) Cependant, en JavaScript, le tiret signifie "moins", il 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 immédiats (liés au comportement) d'éléments qui changent fréquemment. Par exemple, un p peut être utilisé pour le glisser. est déplacé, ses attributs haut et gauche 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é immédiatement et remplacer les paramètres d'autres méthodes.

2. Changer la classe et l'identifiant

l'identifiant et la classe sont des "crochets" 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 classe, mais personnellement, je ne recommande pas de l'utiliser de cette façon car l'identifiant est utilisé pour localiser des éléments. Il est préférable de ne pas l'utiliser pour définir l'affichage. style des éléments, et id est également utilisé. Souvent utilisé comme hook JavaScript, il peut provoquer des erreurs inutiles.

En JavaScript, class est un mot-clé réservé, donc className est utilisé 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 un attribut qui contient toutes les classes de l'élément, toutes les classes sont séparées par des espaces, ce qui rend la suppression des classes peu pratique (il suffit d'ajouter, d'établir simplement une connexion par chaîne entre elles, mais n'oubliez pas d'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 à la supprimer dans className Add un espace au début et à la fin de l'attribut, alors tout deviendra la méthode du milieu, remplacera 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 la modification générale du style, et de définir le CSS Pour les styles, JavaScript émet uniquement des instructions pour les changements de style, et la définition spécifique du style est 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 l'encapsuler avant de l'utiliser :

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

//获取元素样式
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;
}

4. Afficher et masquer les formulaires (n'abusez pas du CSS)

On voit souvent que certaines options de formulaire sont ajoutées dynamiquement, par exemple, si vous sélectionnez mariage dans un formulaire Si le statut est « Marié », 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, vous devez bien sûr masquer tous les formulaires liés au "conjoint", mais pour le moment, vous ne devez pas utiliser CSS pour le résoudre, c'est-à-dire que vous ne pouvez pas utiliser de style. display="none" pour le masquer.

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, même si elle est cachée, elle existe toujours dans le DOM. Si l'utilisateur soumet le formulaire à ce moment-là, le contenu de cette zone de saisie masquée sera soumis ensemble et des erreurs inattendues peuvent survenir ~

L'approche correcte consiste à placer ce contenu dans l'hyperespace DOM. , il n'y aura donc pas le problème ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!