javascript - 在浏览器中呈现后使用 javascript 和 css 样式化 XML(不是 HTML)

Question

我使用的是 webkit 浏览器 (safari)，所以这个问题是针对 webkit 的。

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

这工作得相当好。但我还想动态修改各种元素的样式(我假设使用 javascript)在文档呈现后 .

我可以使用 javascript 使用 document.getElementsByName("a").item(0); 捕获第一个“事物”元素，但我不确定如何设置样式(或如果这可能的话)。这不起作用 => 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;}

Answer 1

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

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

您可以合理地期望 style 属性存在于任意 XML 文档中的元素上吗？ DOM Level 2 Style 规范对 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.

我认为任意 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);