使用javascript& css在浏览器中渲染后 [英] styling XML (not HTML) with javascript & css after rendering in browser

问题描述

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

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

我使用safari渲染一个XML文档（它不是HTML）。为了对文档的某些部分进行样式化，我在文档中附加了一个样式表（见下文）。在下面的情况下，第一个thing元素中的文本以品红色显示。

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.

我可以使用javascript来使用 document.getElementsByName（a）。item（0）捕获第一个thing元素。 ，但我不知道如何设置样式（或者如果这是可能的话）。这不工作=> document.getElementsByName（a）。item（0）.style.display =none;

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";

关于如何在渲染后改变浏览器中的xml元素的样式的任何想法？

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

推荐答案

我可以使用javascript捕获第一个thing元素使用document.getElementsByName（a）。 >

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

你甚至不能这样做，而且不能在非WebKit浏览器上。 getElementsByName 是一个DOM级别1的HTML方法，不应该在XML文档中使用，没有名称属性具有特殊意义。 （这与具有模式类型 ID 的属性的情况稍有不同。）

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.)

code> style 属性存在于任何XML文档中的Elements上？ DOM 2级风格规格可以说明 ElementCSSInlineStyle 接口：

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:

期望的是，可以通过使用特定于绑定的铸造获得ElementCSSInlineStyle接口的实例

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文档的元素由于没有 style 或其他可用于引入CSS的属性，因此不支持内联CSS样式信息。 。

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.

但是，DOM Level 2 Style的 document.styleSheets 界面应该工作（在任何浏览器基础中）。例如，您可以删除 thing [name =a] 规则：

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);

并添加替换者：

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

这篇关于使用javascript& css在浏览器中渲染后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！