JavaScript HTML DOM - changement de CSS

JavaScript HTML DOM - Modification du CSS

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

remplacer 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 d'autres méthodes. La méthode d'utilisation est très simple :

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

Cependant, il faut 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 div qui peut être utilisé pour faire glisser la volonté. changer ses attributs top et left 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 modification de l'identifiant est similaire à celle de la 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 le style d'affichage des éléments. , et id est souvent utilisé car les hooks JavaScript peuvent 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 un attribut qui contient toutes les classes de l'élément.string, toutes les classes sont séparées par des espaces, ce qui rend la suppression de 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, puis tout devient la méthode du milieu, remplacez directement la sous-chaîne :

//Delete 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 modifier le 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 Obtenir le vrai style

La première chose à faire. clear est , il n'est pas possible de transmettre element.style. Il ne peut obtenir que des styles en ligne et la définition dans la feuille de style ne peut pas être obtenue.

É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 :

//获取元素样式
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 (n'abusez pas du CSS)

On voit souvent que certaines options de formulaire sont ajoutées dynamiquement. Par exemple, vous avez sélectionné l'état civil "Marié" dans un formulaire. , il y aura alors une zone de saisie supplémentaire pour que vous puissiez 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 style.display=" aucun" 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, même si elle est cachée, elle existe toujours dans le DOM. heure Lorsque l'utilisateur soumet le formulaire, le contenu de cette zone de saisie masquée sera soumis ensemble et des erreurs inattendues peuvent survenir ~

La bonne façon est de placer ce contenu dans l'hyperespace DOM, afin qu'il soit non, j'ai le problème ci-dessus