CSS未应用于document.write文本

Question

CSS未应用于document.write文本

7

我正在使用 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还是两者都有呢？

- hideyho

1

你在哪里调用 showFolder 函数？你有其他可能会冲突并覆盖样式的样式表吗？我测试了你这里的代码，如果你在函数声明后调用 showFolder 而不是在 ... 处调用，它在 Google Chrome 中可以正常工作。 - John Rasch

showFolder 函数是从另一个函数内部调用的（...），该函数读取 Chrome 书签中的文件夹（基本上是“读取书签树”->“如果项目是文件夹，则通过 showFolder 显示文件夹的名称”）。只是为了好玩，我将 showFolder 声明移到了 ... 函数之前，但问题仍然存在。 - hideyho

3个回答

1

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

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

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

- Chris DuPuis

1

谢谢 - 知道“为什么”而不仅仅是“什么”确实有帮助。 - hideyho

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

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

- criticerz

谢谢回复——将样式表链接从头部移到脚本后面并没有起作用。 - hideyho

1

我发现问题的一个很大部分是每次调用document.write时，它都会清除HEAD中的所有内容（显然它基本上重置了页面），包括LINK标签。Zoltan上面的解决方案让我走上了正确的轨道。 - hideyho

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zoltan Lengyel · Accepted Answer

使用innerHTML。

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

那么，您可以像这样在里面编写内容：

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