Image

Применять CSS-правила в JavaScript к контенту, сгенерированному в DOM-стиле?

Может кто объяснить, как применять CSS-правила в JavaScript к контенту, сгенерированному в DOM-стиле? DOM нужен, потому как документ передается как XML.



Проверьте пример:



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.hi { background: #f00; font-size: 300% }
</style>
<script type="text/javascript">
var hi = document.createElement("p");
function init () {
    hi.appendChild(document.createTextNode("Hi!"));
    document.getElementsByTagName("body")[0].appendChild(hi);
    hi.className = "hi";
}
</script>
<title>Test</title>
</head>
<body onload="init()">
</body>
</html>


Работает с Gecko / Opera / MSIE без парсинга XML (назовите документ test.html и проверьте). Но как XML работает только в Opera (проверьте test.xml). Gecko генерирует контент, но игнорирует hi.className = "hi" (и DOM-определение атрибута class также работает только в Opera).