6

我正在为 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 还是两者都有问题？

4

3 回答 3

4

使用内部 HTML。

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

然后你可以这样写：

div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
于 2011-01-25T03:53:46.787 回答
1

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

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

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

于 2011-01-25T04:10:00.990 回答
0

我不是 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()">

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

于 2011-01-25T03:37:39.733 回答