css not being applied to document.write text

I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:

<!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>

The CSS is simple, just for debugging:

p {
color: red;
}

I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?

Zoltan Lengyel

Use innerHTML.

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

then you can write in it like this:

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

If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.

However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.

Instead, follow Zoltan's advice and set the innerHTML property of an empty div.

I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:

<!DOCTYPE html>

TITLE GOES HERE

<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" />

EDIT:

So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">

No idea if that works, but give it a try.

来源：https://stackoverflow.com/questions/4789695/css-not-being-applied-to-document-write-text

标签

javascript

css

document.write