Question

我正在学习Javascript和CSS，并且遇到了一个问题，我的CSS样式没有应用于标记，我是从XML动态生成的，并在页面加载后写入文档。我只能假设样式没有被应用，因为我在加载后修改文档。它是否正确？如果不是这种情况，您对于为什么没有应用样式有任何想法吗？

这个javascript代码......

$(function()
{
   //Dynamically generate markup
   strMarkup = GenerateMarkupFromXML();

   //Display the dynamically generated markup   
   document.write(strMarkup);
});

动态生成这个简单的标记...

<div id="accordion"><h3>Title1</h3><h3>Title2</h3></div>

但似乎并未应用这些样式，<h3>标签只显示默认浏览器样式...

h3
{
  background-color:#ccc;
  color:#003300;
  font-size:1.1em;   
}

我还应该注意，当我将动态生成的标记直接粘贴到正文中时，样式会正确应用。

提前感谢您的帮助！

Answer 1

是的......样式将应用于任何动态添加的标记。

代码的document.write（）部分可能会导致问题。通常，在加载和解析文档时，您应该只使用document.write（）内联。如果你在DomReady上调用它就像你正在做的那样会覆盖你的整个页面，我猜这是造成问题的原因。我没有测试过。

我对jQuery并不熟悉，但不是使用document.write（）行尝试按照（未经测试）的方式做一些事情：

$（'body'）。append（'＆lt; div id =“accordion”＆gt;＆lt; h3＆gt; Title1 / h3＆gt;＆lt; h3＆gt; Title2＆lt; / h3＆gt;＆lt; / div＆gt;'）;

Answer 2

是的，css会自动应用。你的例子不起作用，因为document.write是邪恶的）我建议用自定义样式重写整个文档。如果要使用document.write，请在文档的相应部分中调用它，而不是在头部。例：

＆LT; HEAD＆GT; ＆LT;风格＆GT; H3 { 背景色：#CCC; 颜色：＃003300; 字体大小：1.1em; } ＆LT; /风格＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆LT;脚本＆GT; document.write（'＆lt; div id =“accordion”＆gt;＆lt; h3＆gt; Title1＆lt; / h3＆gt;＆lt; h3＆gt; Title2＆lt; / h3＆gt;＆lt; / div＆gt;'）; ＆LT; /脚本＆GT; ＆LT; /体＆GT;

Answer 3

是的，CSS样式应用于页面加载后添加的标记。

可能您实际上并没有生成与您认为相同的代码。尝试选择生成的代码并在Firefox中执行“查看选择源”。这将显示生成的源（即，不仅仅是加载页面时提供的静态内容）。

修改

我认为在文档就绪函数中使用document.write（）存在问题。似乎导致某种无限循环（对于我来说，Firefox中，浏览器一直在旋转选项卡上的加载图标，甚至虽然该文件在我的本地机器上）。 $('body').append(strMarkup); solution posted by Andy可以正常工作，$('body').html(strMarkup);;

CSS样式是否应用于页面加载后添加的标记？

3 个答案: