CSS dans JS

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Antho03
Messages : 1
Enregistré le : 07 mai 2021, 13:00

CSS dans JS

Message par Antho03 » 07 mai 2021, 15:09

Bonjour à tous,

Je souhaiterais appliquer une classe CSS dans une fonction JS. Voici mon code qui affiche une mind map dynamique :

Code : Tout sélectionner

function getData() {
			    var data = {					
					"id": 1,
			                "name": "Animals",
			                "type": "Root",
					"description": "A living organism that feeds on organic matter",
					"children": [
						{
							"id": 2,
							"name": "Carnivores",
							"type": "Type",
							"description": "Diet consists solely of animal materials",
							"children": [
								{
									"id": 3,
                                                                          ... je vous passe toute la suite
									
								}
					]
			    };

			    return data;
			}

			var data = getData();

			var treePlugin = new d3.mitchTree.boxedTree()
				.setData(data)
				.setElement(document.getElementById("visualisation"))
				.setIdAccessor(function(data) {
					return data.id;
				})
				.setChildrenAccessor(function(data) {
					return data.children;
				})
				.setBodyDisplayTextAccessor(function(data) {
					return data.description;
				})
				.setTitleDisplayTextAccessor(function(data) {
					return data.name;
				})
				.initialize();
Une feuille de style CSS est appelée sur la page et certaines classes visent la couleur de fond des box, la couleur du contour, la couleur des titres, du texte, etc...
Je peux modifier ces classes dans mon CSS mais elle s'appliquent sur toutes mes box. Je souhaiterais que chacune de mes box ait une couleur différente et pouvoir appliqué une classe CSS par box.

J'ai tenté pour tester

Code : Tout sélectionner

document.getElementById("1").style.color = "purple";
en pensant que ça s'appliquerait sur mon

Code : Tout sélectionner

"id": 1
, sans succès.

Est-il possible de cibler chacun de mes "id" ou tout simplement d'intégrer du CSS directement dans mon JS ?
Si oui, comment ?

Je vous remercie par avance.


Anthony

Avatar du membre
webmaster
Administrateur du site
Messages : 383
Enregistré le : 28 févr. 2017, 15:19

Re: CSS dans JS

Message par webmaster » 07 mai 2021, 19:05

Bonjour,

Le principe du document.getElementById("1").style.color = "purple"; est peut etre bon
Mais il faut trouver le bon ID de l'élément sur la page HTML
Ce n'est pas forcément un nom reproductible

Et je me demande d'ailleurs si ca va vraiment marcher avec D3 qui utilise du SVG...

L'idéal serait de trouver un plugin du module qui accepte des mises en forme
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre