css 未应用于 document.write 文本答案

【问题标题】：css not being applied to document.write textcss 未应用于 document.write 文本
【发布时间】：2017-01-31 02:14:02
【问题描述】：

我正在使用针对 Chrome 扩展的 document.write 将文本写入页面，但未应用关联的自定义 CSS：

<!DOCTYPE html>
<html>
<head>
    <title>TITLE GOES HERE</title>
     <link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>

<body>
     <script type="text/javascript">
        ...
        function showFolder(folder) {
            console.debug('FOLDER: '+folder.title);
            document.write('<p>'+folder.title+'<br></p>');
        }
    </script>

</body>
</html>

CSS 很简单，只是为了调试：

p {
color: red;
}

如果我将样式表链接放在函数 showFolder 中，我可以让它工作，但这不是正确的方法。我正在学习 jscript/CSS，所以答案可能是一些补救措施。是 jscript、CSS 还是两者都有问题？

【问题讨论】：

你在哪里打电话showFolder？您是否有另一个样式表可能会冲突并覆盖样式？我测试了你在这里拥有的东西，如果你在函数声明之后调用 showFolder 而不是你拥有 ... 的位置，它在 Google Chrome 中运行良好
showFolder 从另一个函数 (...) 内部调用，该函数读取 Chrome 书签中的文件夹（基本上是“读取书签树”-> '如果项目是文件夹，则通过 showFolder 显示文件夹的名称）。只是为了好玩，我将 showFolder 声明移到 ... 函数之前，但问题仍然存在。

标签： javascript css document.write

【解决方案1】：

使用innerHTML。

<div id="towrite"></div>

然后你可以这样写：

div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';

【讨论】：

现在试一试。会回来汇报的。谢谢！
结合document.createElement（我需要动态创建几个div），效果很好。再次感谢。
这个答案少了一个引号，应该是<div id="towrite"></div>

【解决方案2】：

如果您在页面完成加载之前运行 document.write()（可能直接从页面上的脚本调用您的 showFolder 调用），那么文本将按照您的预期写入文档。

但是，如果您在页面加载后调用 document.write，就像在事件处理程序中一样，您将编写一个全新的页面。这通常不是您想要的。

相反，按照 Zoltan 的建议设置一个空 div 的 innerHTML 属性。

【讨论】：

谢谢——知道“为什么”而不仅仅是“什么”真的很有帮助。

【解决方案3】：

我不是 javascript 专家...我主要使用 jQuery.. 但是试试这个，有点道理：

<!DOCTYPE html>

标题在这里

<script type="text/javascript">
    ...
    function showFolder(folder) {
        console.debug('FOLDER: '+folder.title);
        document.write('<p>'+folder.title+'<br></p>');
    }
</script>

<link rel="stylesheet" href="css/popup.css" type="text/css" />

编辑：

所以上面没有工作，但我只是想到了另一种解决方案。你什么时候真正调用这个函数？试试放到<body onLoad="functionnamehere()">

不知道这是否可行，但请尝试一下。

【讨论】：

感谢您的回复--将样式表链接移出头部并且在脚本不起作用之后。
我发现问题的很大一部分是每次调用 document.write 时都会清除 HEAD 中的所有内容（显然它基本上会重置页面），包括 LINK 标签。上面 Zoltan 的解决方案让我走上了正轨。