Modifier une classe CSS avec Javascript

Résolu

Ndrea -
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 dns - Guide
Modifier liste déroulante excel - Guide
Modifier une story facebook - Guide
Modifier extension fichier - Guide
Vous avez besoin d'une autorisation de la part de système pour modifier ce dossier - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Bonjour,

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

Je vais potasser. :)

Un excellent week-end à vous.

Torton

+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

Bonjour Torton,

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

Discussions similaires

modifier mes fiche de salaires

java script error in the main process

Modifier annonce Leboncoin sans payer

Votre réponse

Discussions similaires