If I understand your question, you have information in your XML that you want to show in your HTML. And depending on the status/content of your XML, you also want it to be shown/presented/styled differently using CSS.
With CSS, you can select things, using ID, class or in the case of [color=green]
, attributes. But the code that you have supplied, you haven't attached the color
attribute to your HTML. So to make this work, with the CSS that you have, you need to do something like
var status = $(root).find("systemStatus");
var color = status.attr("color"); //get the attribute value from the XML
$("#status").attr("color", color); //assign the attribute value to the HTML
$("#status").html(status.text());
result = $(root).find("networkNotes");
$("#networkNotes").html($(result).text());
But moving forward, semantically, I think you don't need to use color="green"
. It actually not be the "correct" way (in terms of content and presentation seperation). I would actually suggest using classes and assign them based on the actual "status". So example normal
,warning
and danger
. Then you can simply have the color information (or "presentation" information) be in the CSS file.
So your XML for status will be something like
<systemStatus>Normal</systemStatus>
and the jQuery code would be something like
var status = $(root).find("systemStatus").text();
$("#status").html(status);
$("#status").attr("class", status.toLowerCase());
and your css will be something like
#status.normal {
background:green
}
#status.congested {
background:yellow;
color:black
}
#status.down {
background:red
}