Question

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

document.getElementsByTagNameNS(namespace, tagName)会返回一组对象，但这些对象没有CSSStyleDeclaration样式属性（至少不在Chrome或Firefox中）。

你可以说这是设计的，CSS是特定于HTML的。但命名空间的CSS样式内容很好。所以样式信息就在那里。我该如何阅读和书写？

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

（编辑以添加示例：）

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

Answer 1

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

要获取计算值，请使用window.getComputedStyle（）。

要查看它的实际效果，请在</body>标记

之前将此脚本添加到您的XHTML中

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

检查控制台输出。

要判断元素是否为内联或块或其他显示值，请使用window.getComputedStyle(element, null).getPropertyValue("display")

如何在XHTML中访问命名空间元素上的.style

1 个答案: