javascript - 如何访问 XHTML 中命名空间元素的 .style

Question

在显示带有命名空间元素的 XHTML 文档的浏览器中，如何使用 JavaScript 访问 .style HTML 命名空间之外的元素的属性？

document.getElementsByTagNameNS(namespace, tagName)返回对象集合，但对象没有 CSSStyleDeclaration style 属性(至少在 Chrome 或 Firefox 中不是)。

您可以说这是设计使然，CSS 特定于 HTML。但是命名空间的 CSS 样式内容很好。所以样式信息就在某处。如何读写？

例如，我想知道哪些元素被渲染为 block ，哪些内联。

(编辑以添加示例:)

要查看此内容，请转至 www.johnmccaskey.com/style.xhtml .蓝色部分在 HTML 命名空间中，红色部分在 http://www.tei-c.org/ns/1.0 中命名空间。 CSS 对它们进行了很好的样式化。例如，在 Chrome 的控制台中，输入 document.getElementsByTagName("box") .你会看到两个 <box>对象。 HTML 有一个 .style属性(property)，TEI 没有。

Answer 1

.style property 是 HTML 元素上 content 属性的反射(reflect)，例如<div style="color:green"> ，而不是从级联中获得的计算样式的反射(reflect)。

要获取计算值，请使用 window.getComputedStyle()。

要查看实际效果，请将此脚本添加到您的 XHTML 中，就在 </body> 之前标签

<script>
var boxes = document.body.children;
console.log(window.getComputedStyle(boxes[0], null).getPropertyValue("color"));
console.log(window.getComputedStyle(boxes[1], null).getPropertyValue("color"));
</script>

并检查控制台输出。

要判断一个元素是行内元素还是 block 元素还是其他一些显示值，请使用 window.getComputedStyle(element, null).getPropertyValue("display")