在浏览器中呈现后使用 javascript 和 css 设置 XML（不是 HTML）样式答案

【问题标题】：styling XML (not HTML) with javascript & css after rendering in browser在浏览器中呈现后使用 javascript 和 css 设置 XML（不是 HTML）样式
【发布时间】：2009-12-15 10:24:51
【问题描述】：

我使用的是 webkit 浏览器（safari），所以这个问题是 webkit 特有的。

我有 Safari 渲染一个 XML 文档（它不是 HTML）。为了给文档的某些部分设置样式，我在文档中附加了一个样式表（见下文）。在下面的例子中，第一个“事物”元素中的文本以洋红色显示。

这工作得相当好。但我也想动态修改各种元素的样式（我假设使用 javascript）在文档渲染后 。

我可以通过 document.getElementsByName("a").item(0); 使用 javascript 来捕获第一个“事物”元素，但我不确定如何设置样式（或如果这可能的话）。这不起作用 => document.getElementsByName("a").item(0).style.display = "none";

关于如何在浏览器中更改呈现后的 xml 元素的样式？

<?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;}

【问题讨论】：

标签： javascript css xml safari webkit

【解决方案1】：

我可以使用 javascript 通过 document.getElementsByName("a").item(0) 捕获第一个“事物”元素

你甚至不应该这样做，而且你不能在非 WebKit 浏览器上。 getElementsByName 是一种 DOM Level 1 HTML 方法，不应该在 XML 文档上可用，它没有 name 属性具有特殊意义的概念。（这与模式类型为ID 的属性的情况略有不同。）

您可以合理地期望任意 XML 文档中的元素上存在 style 属性吗？ DOM Level 2 Style 规范对ElementCSSInlineStyle 接口有这样的说法：

期望当元素支持内联 CSS 样式信息时，可以通过在 Element 接口实例上使用特定于绑定的强制转换方法来获得 ElementCSSInlineStyle 接口的实例。

我认为任意 XML 文档的元素不支持内联 CSS 样式信息，因为没有 style 或其他可用于引入 CSS 的属性，不像 [X ]HTML。 Mozilla 和 Opera 同意这里的 WebKit 不提供它。

然而，DOM Level 2 Style 的document.styleSheets 接口应该可以工作（在任何这些浏览器基础中）。例如，您可以通过以下方式删除thing[name="a"] 规则：

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

并通过以下方式添加替换：

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

【讨论】：

【解决方案2】：

看起来不太好，但我会尝试单击W3C spec 中的链接，看看 WebKit 是否支持您想要的样式。如果没有，您可以在查看数据后从服务器动态请求样式表。这可能是唯一的解决方法。

【讨论】：