Comment appliquer une class css à une fonction javascript ? [Résolu]

Messages postés
10
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
9 octobre 2019
-
Bonjour,
Ma question est toute bête. Mais quand on ne sait pas, rien n'est bête...
Je débute en JavaScript. Dans ce projet, j'utilise la librairie p5.js
J'ai ce code qui affiche du texte :
function setup() {

  let parent = select('#animation')
  let width  = parent.width
  let height = parent.height


  // create the canvas in element
  let canvas = createCanvas(width, height);
  canvas.parent(parent);

  console.warn("canvas parent", parent, ", width", width, ", height", width)

  background(255);
  text("Cliquez pour commencer", w, h);

// don't forget to resize
function windowResized() {
  let parent = select('#animation')
  resizeCanvas(parent.width, parent.height);
}


Ce que je voudrais c'est pouvoir gérer avec du css la couleur, taille, typo, etc. du texte :
text("Cliquez pour commencer", w, h);

Cela doit être assez simple... mais je ne trouve pas.
Je vous remercie par avance.

Sylvain
Afficher la suite 

2 réponses

Messages postés
124
Date d'inscription
mardi 4 juillet 2017
Statut
Membre
Dernière intervention
17 octobre 2019
1
0
Merci
Salut,
Si le projet est associé à une page Htlm, il te faut près-charger ta déco au chargement.
Pace ton fichier de formatage CSS dans le header de ta page, il restera en mémoire pour tous les appels dans les fonctions JS qui seront lancées.

<HTML><HEAD>
<link rel="Monstyledetexte" type="text/css" href="styles.css">
</HEAD>

Tu assigneras la classe déco lors de l'appel de la classe JS.
super-S
Messages postés
10
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
9 octobre 2019
-
Merci pour la réponse.
Je suis désolé. Mais je n'ai pas compris.
"Tu assigneras la classe déco lors de l'appel de la classe JS"

Mon html appelle bien une feuille de style css.
Dans le body, je n'ai que ça :

<body>
<main>
<div id="animation"></div>
</main>
</body>
JeuDuTaquin
Messages postés
124
Date d'inscription
mardi 4 juillet 2017
Statut
Membre
Dernière intervention
17 octobre 2019
1 > super-S
Messages postés
10
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
9 octobre 2019
-
Salut Super-S,
Il faut donc que tu vérifies le scripte CCS pour la module "animation".
Tu fait une recherche sur '.animation', je ne connais pas le p5, mais tu dois avoir un module identifié "p5 .animation [.div] [p]" qui sera ton aiguillage vers ta déco.

Tu peux tenter un:
<body>
	<main>
    	<div>
       <p id="animation">
       </p>
       </div>
	</main>
</body>
super-S
Messages postés
10
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
9 octobre 2019
-
Encore désolé mais j'ai rien compris :-)
Qu'entends-tu par script CCS ? je ne voit de module p5.animation ?
[.div][p] ...

Je pense que je me suis mal exprimé.
Dans mon navigateur, j'ai une phrase qui s'affiche :"Cliquez pour commencer".
Cette phrase est dans le fichier JavaScript
text("Cliquez pour commencer", w, h);


Code JavaScript complet :

var w = screen.width/2;
var h = screen.height /2.5;

function setup() {
let parent = select('#animation')
let width = parent.width
let height = parent.height

// create the canvas in element
let canvas = createCanvas(width, height);
canvas.parent(parent);
console.warn("canvas parent", parent, ", width", width, ", height", width)

text("Cliquez pour commencer", w, h);
}


Dans mon fichier html, je n'ai presque rien :
	
<main>
<div id="animation"></div>
</main>


Et ensuite j'ai un fichier css avec :

#animation
{
width: 100% !important;
top: 0;
left: 0;
transform: none;
}

.deco{
font-family: Impact;
color: #FFFF00;
font-size:25pt;
text-align: center;
}

main {
margin-top: 0%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
}


Je voudrais juste que la phrase cliquez pour commencer soit en Impact et en jaune.
Je voudrais aussi si j'ai une seconde fonction avec text(""); pouvoir lui assigner un .deco2{} par exemple.
Je pourrais le faire dans le JavaScript directement.

background(255);
textFont("Impact");
textSize(24);
textAlign(CENTER);
text("Cliquez pour commencer", w, h);

Mais je préfererais que cela soit gérer en css

Il y a peut être un truc avec : document.getElementsBy
ou let parent = select('') ou autre chose.

Merci encore.
J'espère ne pas être trop relou. Je ne veux pas insister.

Bonne soirée

Sylvain
JeuDuTaquin
Messages postés
124
Date d'inscription
mardi 4 juillet 2017
Statut
Membre
Dernière intervention
17 octobre 2019
1 > super-S
Messages postés
10
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
9 octobre 2019
-
Slut Sylvain,
Y a pas de mal à comprendre.
Tu peux effectuer un formatage sur le :
.p{
	font-family: Impact;
	color: #FFFF00;
	font-size:25pt;
	text-align: center;
}

ça te donnera une base par défaut pour ton script ou tu prends l'index "DECO" pour l'habillage.
Amuse-toi bien.
super-S
Messages postés
10
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
9 octobre 2019
-
Comment cela pourrait marcher, sachant qu'il n'y a pas de texte de la fichier html ? Donc pas de balise <p>...</p>
C'est ça que je ne comprends pas...
Le texte est dans le fichier JavaScript.

Le projet est ici : http://supersly.org/Je-ne-me-rappelle-plus-rien-De-bien/
(même si au départ je ne voulais pas le montrer en entier)

Merci beaucoup
Commenter la réponse de JeuDuTaquin
Messages postés
10
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
9 octobre 2019
0
Merci
Merci.
J'ai réussi.
J'ai utilisé :
createElement('h1', '');

Encore merci de ton aide.
Commenter la réponse de super-S