Modifier une classe CSS avec Javascript [Résolu]

Signaler
-
 Ndrea -
Bonjour à tous,

J'ai une fonction javascript qui après le
else
fait 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

Messages postés
27633
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 février 2020
2 124
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");

Bonjour,

Merci beaucoup pour ces précisions et navré pour la confusion des langages.

Je vais potasser. :)

Un excellent week-end à vous.
+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; }';

> Torton
Bonjour Torton,

Merci pour ces nouvelles précisions, c'est top!