XML可以與CSS樣式表交互嗎？

比方說，我有一張CSS表格，其中包含有關如何顯示系統狀態的站點的信息。根據現場的情況，以下情況之一將是狀態的屬性：存儲用於個人網站的詳細信息及其狀態XML可以與CSS樣式表交互嗎？

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

我會

#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文檔使用XML DOM從XML中選擇值來填充頁面的元素。雖然經過一些測試，但我仍然發現，如果不實際更改網站的屬性，我可以更改系統狀態的文本，但不會更改欄的顏色。

我希望能夠改變XML文件並設置<systemStatus color"red">SYSTEM IS DOWN</systemStatus>，並且不僅改變文本，而且改變欄顏色爲「red.jpg」而不必進入html並手動編輯狀態。

到目前爲止，爲了解決這個問題，我爲我的XML元素添加了'color =「green，yellow，red」'屬性，向CSS添加了2個新狀態（由此第一個代碼塊問題），迄今爲止無法連接點。

是否有一種方法可以使其只對XML文件進行更改，以便爲該網站的系統狀態更改文字&欄顏色？這裏的最終目標是能夠更改systemStatus的XML屬性和文本，並更改網站上的文本&。

來源

2014-05-05 Mkalafut

用於XML的CSS是可能的：http://www.w3.org/Style/styling-XML Javascript，我想不是。 – GolezTrol

正是我所看到的。我希望能夠用Javascript來完成。 – Mkalafut

除非先格式化XML爲HTML。 JavaScript在JavaScript引擎的上下文中運行。 –

使用CSS3屬性選擇器。

<systemStatus color="green">

CSS：

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

來源

2014-05-05 20:32:54

您可以使用此處理指令CSS樣式錶鏈接到一個XML文件：

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

更多關於它的詳細信息可以在這裏找到：http://www.w3.org/Style/styling-XML

這樣，您可以添加樣式到任何元素，甚至在選擇中使用屬性TOR：

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

我想你也可以使用特殊選擇像:first-child和這樣。如果當前的XML沒有您需要的結構，您應該能夠將XML轉換爲另一個XML。Afaik，沒有辦法將Javascript包含在XML文件中，但是您應該能夠將XML轉換爲另一個XML。在轉換中，您可以添加需要的樣式的元素和屬性。另請參閱Xml to Xml transformation使用XSLT。

來源

2014-05-05 20:33:02 GolezTrol

我應該澄清，我在我的網站的HTML文件中使用JavaScript。我沒有使用JavaScript來做這些事情，所以我會嘗試編輯該部分和標籤，因爲這不是主要問題。 – Mkalafut

好的，清楚。那麼，最後一段可能對你沒有用處，但CSS部分仍然適用。 – GolezTrol

什麼其他人說，再加上你可以設置通過CSS的內容太：

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

我建議使用該屬性的描述性詞語，而不是明確的顏色，這樣就可以在以後關於改變你的想法在不改變命名的情況下顯示器應該是什麼。喜歡的東西

<systemStatus status="ok"/>

和CSS

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

來源

2014-05-05 20:36:41 Pointy

+1爲'描述性術語'部分。 – GolezTrol

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語言，你的情況）必須然後插入到這個主文件的DOM爲（X）HTML片段或文本element.innerHTML。

小心從不受信任的源插入innerHTML，但如果XML文件中的數據來源不可信，它們可能包含Javascript代碼，然後可能會在插入主機HTML時執行該代碼。

來源

2014-05-05 20:53:54

XML可以與CSS樣式表交互嗎？

回答

相關問題