Page 1 sur 1

CSS dans JS

Posté : 07 mai 2021, 15:09
par Antho03
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

Re: CSS dans JS

Posté : 07 mai 2021, 19:05
par webmaster
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