styling XML (not HTML) with javascript & css after rendering in browser

Question

Hi, I'm using a webkit browser (safari), so this question is specific to webkit.

I have safari rendering an XML document (it's not HTML). In order to style certain sections of the document, I've attached a stylesheet (see below) to the document. In the case below, the text within the first "thing" element is displayed in magenta.

This works reasonably well. But I would also like to dynamically modify the style of various elements (I assume by using javascript) after the document has been rendered.

I can use javascript to capture the first "thing" element using document.getElementsByName("a").item(0); but I'm not sure how to set the style (or if this is possible at all). this does not work => document.getElementsByName("a").item(0).style.display = "none";

Any thoughts on how to change the style of an xml element in a browser after it's been rendered?

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="simple.css" type="text/css"?>
<document xmlns:ab="adfadfafadf">
  <thing name="a">stuff</thing>
  <thing name="b">stuff2</thing>
</document>

_

//simple.css________________________________
document {margin: 1em; font-family: sans-serif; font-size: 14px;}
thing[name="a"] {color: magenta;}

Answer 1

It doesn't look good, but I would try clicking on the links in the W3C spec to see if WebKit supports the styling you want to do. If it doesn't, you could dynamically request a stylesheet from the server after you've looked at the data. That might be the only work around.

Answer 2

I can use javascript to capture the first "thing" element using document.getElementsByName("a").item(0)

You shouldn't even be able to do that, and you can't on non-WebKit browsers. getElementsByName is a DOM Level 1 HTML method that shouldn't be available on XML documents, which have no notion of name attributes having special significance. (This is slightly different to the situation with attributes of schema type ID.)

Can you legitimately expect a style property to exist on Elements in arbitrary XML documents? The DOM Level 2 Style spec has this to say about the ElementCSSInlineStyle interface:

The expectation is that an instance of the ElementCSSInlineStyle interface can be obtained by using binding-specific casting methods on an instance of the Element interface when the element supports inline CSS style informations.

I'd argue that an arbitrary XML document's elements do not support inline CSS style information, as there is no style or other attribute that could be used to introduce CSS, unlike with [X]HTML. Mozilla and Opera agree with WebKit here in not providing it.

However, DOM Level 2 Style's document.styleSheets interface should work (in any of those browser bases). For example you can remove the thing[name="a"] rule by saying:

document.styleSheets[0].deleteRule(1);

and add a replacement by saying:

document.styleSheets[0].insertRule('thing[name="a"] {display: none;}', 1);