Как получить доступ к .style на пространствах с именами в XHTML

Question

В браузере, который отображает документ XHTML с элементами с именами, как я могу использовать JavaScript для доступа к свойствам элемента вне пространства имен HTML?

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, например. <div style="color:green">, а не отражение его вычисленных стилей, полученных из каскада.

Для получения вычисленных значений используйте 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> 

И проверить консольный вывод.

Рассказывать элемент, является ли встроенный или блок или другое значение дисплея, используйте window.getComputedStyle(element, null).getPropertyValue("display")