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.
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" //让元素隐藏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.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//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}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 :
//获取元素样式
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;
}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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
