CSS не применяется к тексту document.write - PullRequest
Новая
       1

CSS не применяется к тексту document.write

5 голосов
/ 25 января 2011

Я пишу текст на страницу, используя 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 или в обоих?

Ответы [ 3 ]

3 голосов
/ 25 января 2011

Используйте innerHTML. 

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

тогда вы можете написать в нем так: 

div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
1 голос
/ 25 января 2011

Если вы запустите ваш document.write () до того, как страница завершит загрузку (возможно, вызов вашего showFolder вызывается непосредственно из скрипта на странице), тогда текст будет записан в документе, как вы могли ожидать.

Однако, если вы вызовете document.write после загрузки страницы, как в обработчике событий, вы будете писать совершенно новую страницу.Обычно это не то, что вам нужно.

Вместо этого следуйте советам Золтана и установите свойство innerHTML для пустого элемента div.

0 голосов
/ 25 января 2011

Я не эксперт по 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()">

Не знаю, работает ли это, но попробуйте.

...