Question

我正在使用document.write为Chrome扩展程序向页面编写文本，但未应用关联的自定义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还是两者都有问题？

Answer 1

使用innerHTML。

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

然后你可以这样写：

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

Answer 2

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

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

相反，请遵循Zoltan的建议并设置空div的innerHTML属性。

Answer 3

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

<!DOCTYPE html>

TITLE去这里

<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()">

不知道这是否有效，但试一试。

css没有应用于document.write文本

3 个答案: