Wie verwendet man XML-Daten als Variablen in CSS?

Question

Ich möchte eine Anzeige von Daten entwickeln, die aus technischen Gründen nicht in einer Datenbank gespeichert werden können, daher scheint XML meine einzige Lösung zu sein. Ich muss Elemente in einem x/y-Achsen-Diagramm anzeigen, von denen jedes anklickbar sein soll, und ein div öffnen, das weitere Informationen enthält. Stellen Sie sich eine Liste von Früchten vor, die basierend auf einer x-Achse der Knusprigkeit (0-100) und einer grünen Achse (0-100) angezeigt werden. Wenn Sie darauf klicken, können Sie Ernährungsinformationen, Fotos usw. sehen)

die XML wäre so etwas wie diese:

<fruit_list> 
    <fruit> 
    <name>Orange</name> 
    <xaxis>7</xaxis> 
    <yaxis>5</yaxis> 
    <description>round and orange and not crunchy</description> 
    </fruit> 
    <fruit> 
    <name>Granny Smith apple</name> 
    <xaxis>85</xaxis> 
    <yaxis>90</yaxis> 
    <description>round and green and crunchy</description> 
    </fruit> 
</fruit_list> 

ich habe gehofft, dass es eine Möglichkeit wäre, den Wert der x- und y-Daten im XML zu verwenden, um die Position der Elemente in definieren das CSS. Ich muss zugeben, dass ich nicht viel Erfahrung mit XML hatte, ich habe es nur verwendet, um Daten in einfachen Tabellen anzuzeigen. Jeder hat eine Idee?

Answer 1

Dies ist nur eine Idee von mir, aber Sie könnten verschiedene CSS-Klassen für einen benutzerdefinierten Bereich auf der x & y-Achse verwenden.

Zum Beispiel könnte man diesen Bereich 90-100 (x) und 90-100 (y) definieren haben die Klasse

.x90-100_y90-100{ 
    /*Your CSS comes here...*/ 
} 

Bereich 90-100 (x) und 80-89 (y) haben die Klasse

.x90-100_y80-89{ 
    /*Your CSS comes here...*/ 
} 

... 

Und so eins.

Dann könnten Sie die Klassen den HTML-Elementen (JS, PHP, usw.) in der Funktion zuweisen, in der Sie Ihre HTML-Elemente aus der XML-Datei erstellen.

Vielleicht kann dies Ihnen helfen :)