Question

假设我有一张CSS表格，其中包含有关如何显示显示系统状态的网站的信息。根据站点的状态，以下之一将是状态的属性：

#green_status 
{
    color: white;
    text-align: left;
    background: url(images/green.jpg) no-repeat;
}

#yellow_status
{
    color: white;
    text-align: left;
    background: url(images/yellow.jpg) no-repeat;
}

#red_status
{
    color: white;
    text-align: left;
    background: url(images/red.jpg) no-repeat;
}

和一个XML文档，用于存储各个站点及其状态的详细信息

    <site> 
        <name>New Site</name>
        <headerImage>header image goes here</headerImage>
        <systemStatus color="green">Normal</systemStatus>
        <networkNotes>System status is normal</networkNotes>
    </site>

我将使用XML DOM从XML中选择值来填充页面的元素。虽然经过一些测试后我仍然发现我可以更改系统状态的文本而不是条形颜色，而不会实际更改网站的属性。

我希望能够只更改XML文件并设置<systemStatus color"red">SYSTEM IS DOWN</systemStatus>，不仅可以更改文本，还可以将条形颜色更改为“red.jpg”，而无需进入html并手动编辑状态。

到目前为止，为了解决这个问题，我在我的XML元素中添加了'color =“绿色，黄色，红色”'属性，为CSS添加了2个新状态（由此问题的第一个代码块表示）），到目前为止还无法连接点。

有没有办法可以让它只需要对XML文件进行更改以更改文本和文本。条形颜色为该网站的系统状态？这里的最终目标是能够只更改systemStatus的XML属性和文本，并更改条形图和条形图。网站上的文字。

Answer 1

使用CSS3属性选择器。

<systemStatus color="green">

CSS：

systemStatus[color='green'] {
     background-color:#2f2;
}

Answer 2

您可以使用以下处理指令将CSS样式表链接到XML文件：

<?xml-stylesheet href="my-style.css"?>
... rest of document here...

有关它的更多详细信息，请访问：http://www.w3.org/Style/styling-XML

使用它，您可以为任何元素添加样式，甚至可以在选择器中使用属性：

systemStatus[color="red"] {
  color: red;
}

我认为您也可以使用:first-child之类的特殊选择器等。

Afaik，没有办法在XML文件中包含Javascript，但如果当前的XML没有您需要的结构，您应该能够将XML转换为另一个XML。在转换中，您可以添加为其设置样式所需的元素和属性。另请参阅Xml to Xml transformation使用XSLT。

Answer 3

其他人说了什么，另外你也可以通过CSS设置内容：

systemStatus[color='green']::after {
  content: "ALL IS WELL";
}

我建议对属性使用描述性术语，而不是明确地使用颜色，以便稍后可以改变主意，不改变命名法，显示应该是什么。像

这样的东西

  <systemStatus status="ok"/>

和CSS

  systemStatus[status="ok"] {
    color: green;
    background-color: white;
  }

Answer 4

XML没有指定任何显示或格式，因此如果您确实要将文本显示为绿色，则需要使用显示语言（例如HTML或XSL-FO）来执行此操作。

您可以指定包含（X）HTML片段的标记，可以是XHTML片段，例如

<site xmlns:h="http://www.w3.org/1999/xhtml"> 
    ...
    <systemStatus><h:p class="ok" style="color: green;">Normal</h:p></systemStatus>
    ...
</site>

或作为CDATA：

<site> 
    ...
    <systemStatus><![CDATA[<p class="ok" style="color: green;">Normal</p>]]></systemStatus>
    ...
</site>

您的主机显示语言（在您的情况下为HTML + Javascript）必须将其作为（X）HTML片段或使用element.innerHTML以文本方式插入到主机文档的DOM中。

请注意从不受信任的来源插入innerHTML，但如果XML文件中的数据来自不受信任的源，则它们可能包含Javascript代码，然后可以在插入主机HTML时执行。

XML可以与CSS样式表交互吗？

4 个答案: