Comment appliquer une class css à une fonction javascript ?

Résolu

super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020 - Modifié le 6 oct. 2019 à 20:03
pinballWizard - 14 nov. 2019 à 11:32

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

A voir également:

Javascript class css
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Exemple de page d'accueil html et css ✓ - Forum Graphisme/design
Base de données javascript - Conseils pratiques -Javascript
Map css ✓ - Forum PHP

2 réponses

Réponse 1 / 2

JeuDuTaquin Messages postés 251 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 31 mai 2023 7
Modifié le 6 oct. 2019 à 16:37

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 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020
6 oct. 2019 à 17:43

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 251 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 31 mai 2023 7 > super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020
7 oct. 2019 à 00:59

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 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020
7 oct. 2019 à 18:46

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

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 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020
8 oct. 2019 à 11:31

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

Réponse 2 / 2

super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020
9 oct. 2019 à 16:44

Merci.
J'ai réussi.
J'ai utilisé :

createElement('h1', '');

Encore merci de ton aide.

pinballWizard
Modifié le 14 nov. 2019 à 11:36

salut, content que vous ayez résolu votre problème.
Je passe juste dire que ça n'a aucun rapport avec le CSS .createElement étant une fonction JavaScript qui ...crée un élément HTML.

Quand à votre titre il est complétement biaisé:
"Comment appliquer une class css à une fonction javascript ? "
Une fonction JavaScript ne peut avoir une classe CSS... une classe CSS est indiqué uniquement sur du HTML(éventuellement XML mais le principe est le même).
C'est bien simple JavaScript en lui même n'affiche rien, c'est le HTML qui et son CSS associé qui font ça.
JavaScript permet de manipuler la page et donc HTML et CSS mais absolument pas l'inverse, ne confondez pas tout ça vous aidera à comprendre ;)

Votre réponse