Modifier une classe CSS avec Javascript
Résolu
Ndrea
-
Ndrea -
Ndrea -
Bonjour à tous,
J'ai une fonction javascript qui après le
Ce test fonctionne bien!
Sous mon champ input1, j'ai actuellement une barre horizontale avec une animation lorsqu'on entre dans le champ ;
J'aimerais bien modifier ce code-là avec java. Par exemple que la height passe à 6px lors de mon fameux
mais je n'arrive à rien.
Je me réjouis de vous lire et d'ores et déjà merci mille fois pour l'attention que vous accorderez à ma question.
Avec toute ma reconnaissance.
Ndrea
J'ai une fonction javascript qui après le
elsefait notamment et pour le moment ;
$("#input1").css("border-bottom","3px solid #933723");
Ce test fonctionne bien!
Sous mon champ input1, j'ai actuellement une barre horizontale avec une animation lorsqu'on entre dans le champ ;
.groupe.formulaire .barre::before {
content: '';
height: 3px;
width: 0;
left: 100%;
bottom: -0.125rem;
position: absolute;
background: #239374;
transition: left 0.10s ease, width 0.10s ease;
z-index: 2; }
J'aimerais bien modifier ce code-là avec java. Par exemple que la height passe à 6px lors de mon fameux
else. Auriez-vous une idée sur la façon de le faire ? J'ai essayé des choses avec
var elmt = document.getElementById("...");
mais je n'arrive à rien.
Je me réjouis de vous lire et d'ores et déjà merci mille fois pour l'attention que vous accorderez à ma question.
Avec toute ma reconnaissance.
Ndrea
1 réponse
-
Bonjour,
J'aimerais bien modifier ce code-là avec java.
javaSCRIPT et non JAVA (ce sont deux langages différents )
Tu sembles utiliser JQUERY$("#input1").css("border-bottom","3px solid #933723");
très bien.. il faut continuer dans ce cas.
Voici un site qui te donnera tous les selecteurs jquery possibles
https://api.jquery.com/category/selectors/
tu peux aussi regarder ici:
https://www.w3schools.com/jquery/jquery_selectors.asp
Par exemple, pour manipuler tous les éléments html qui ont la class barre
tu peux$(".barre").css("height","6px");
-
-
+1 faut pas confondre Java et JavaScript qui n'ont rien à voir... d'ailleurs ils ont des noms différents!
quand à JQuery c'est une utilisation de JavaScript qui se sert d'un fichier générique comprenant des outils bien pratique.
pour infos voici en pur JavaScript les équivalents
document.getElementsByClassName('aaa'); //-- fournit un tableau de tous les éléments avec la classe 'aaa' //--Pour modifier un attribut de balise: ELEMENT.setAttribute('style', 'border: 3px solid #933723;');/** modifie l'attribut style de ELEMENT avec la valeur du 2ème paramètre */
Il est aussi possible de changer ce qui est indiqué dans la balise style de la page(si il y en a une) mais pour l'instant ce contenu est traité comme du texte.
//-- vérifie si il y a bien une balise style sinon on la crée et on la met dans le HEAD if(styleDePage ===undefined || styleDePage === null){ let baliseStyle=document.createElement('STYLE'); baliseStyle.setAttribute('type', 'text/css'); baliseStyle.setAttribute('rel', 'stylesheet'); document.getElementsByTagName('head')[0].appendChild(baliseStyle); } let styleDePage= document.getElementsByTagName('style')[0]; let texteDuCSS=styleDePage.innerHTML; //-- ajoute une classe styleDePage.innerHTML=texteDuCSS+' .maNouvelleClasse{ border: 3px solid red; }';
-
