html - 如何在 CSS 中使用 XML 数据作为变量？

Question

我想开发一种由于技术原因无法放入数据库的数据显示，因此 XML 似乎是迄今为止我唯一的解决方案。我需要在 x/y 轴图上显示元素，每个元素都可以点击并打开一个包含更多信息的 div。想象一个水果列表，根据脆度的 x 轴 (0-100) 和绿色的 y 轴 (0-100) 显示，然后单击时您可以看到营养信息、照片等(有点像 like this )

XML 应该是这样的:

<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>

我希望有一种方法可以使用 XML 中的 x 和 y 数据的值来定义元素在 CSS 中的位置。我必须承认我对 XML 没有太多经验，我只用它来显示简单表格中的数据。有人有想法吗？

Answer 1

这只是我的一个想法，但您可以使用不同的 CSS 类来自定义 x&y 轴上的范围。

例如，您可以定义范围 90-100 (x) 和 90-100 (y) 具有类

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

Range 90-100 (x) 和 80-89 (y) 有类

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

...

等等。

然后您可以在从 XML 文件创建 HTML 元素的函数中将类分配给 HTML 元素(JS、PHP 等)。

也许这可以帮到你 :)