Modifier une classe CSS avec Javascript

Résolu/Fermé

Ndrea - 31 janv. 2020 à 08:59
Ndrea - 31 janv. 2020 à 14:43

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

A voir également:

Modifier une classe CSS avec Javascript
Modifier liste déroulante excel - Guide
Comment modifier un pdf - Guide
Modifier dns - Guide
Modifier une story facebook - Guide
Telecharger javascript - Télécharger - Langages

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
31 janv. 2020 à 10:38

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");

Ndrea
31 janv. 2020 à 13:52

Bonjour,

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

Je vais potasser. :)

Un excellent week-end à vous.

Torton
Modifié le 31 janv. 2020 à 14:13

+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; }';

Ndrea > Torton
31 janv. 2020 à 14:43

Bonjour Torton,

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

Discussions similaires

Documents scannés à modifier, photoshop et toutiquanti ...

[CSS] Forcé retour à la ligne

trait horizontal avec du css

Discussions similaires

Newsletters