运行javascript代码时，网页样式会一直恢复为默认值

Question

I am working on a text based game. 我正在开发基于文本的游戏。 I am only having some trouble with formatting. 我在格式化方面仅遇到一些麻烦。 I want the text to be white and the background to be black throughout the entire code. 在整个代码中，我希望文本为白色，背景为黑色。 I set both of those in style. 我将两者都设置为样式。 When I run the script, the styling works and the background is the color that I want, but as soon as I answer a prompt, the background reverts to default white and ignores the styling all together. 当我运行脚本时，样式就可以使用，背景就是我想要的颜色，但是一旦我回答提示，背景就会恢复为默认的白色，并且会完全忽略样式。

<head>
<style>
#game {
    width:1100
}
body {background-color:black}
p {color:white}
</style>
</head>
<body>
<div id="game">
<script type="text/javascript">
    window.onload = function() {
        var seed = prompt("What kind of potato do you want to be? A RUSSET POTATO, RED POTATO, or SWEET POTATO?")
        switch(seed) {
            case 'RUSSET POTATO' :
                document.write("<p>Hot diggity! You became a Russet Potato!</p>");
            break;
            case 'RED POTATO' :
                document.write("<p>Greetings comrade! Welcome to the potatoes of Soviet Socialist Republics!</p>");
            break;
            case 'SWEET POTATO' :
                document.write("<p>Hey there sweet thing! You're such a Sweet Potato!</p>");
            break;
            default:
                document.write("<p>Make sure you are spelling your answers correctly and typing them in all caps!</p>");
        }

        var soil = prompt("What type of soil will you be planted in? PODZOL, STUTTGART, RED, AKADAMA, or CLAY?");
        switch(soil) {
            case 'PODZOL' :
                document.write("There are many minerals, but the acid is ruining the shell of your seed! You die an agonizing and slow death.");
                //link to lose page
            break;
            case 'STUTTGART' :
                document.write("Your seed is nice and cozy in its new home. Happy growing!");
            break;
            case 'RED' :
                document.write("Good choice comrade, but communism isn't always the best choice. Getting water will be a bit difficult.");
            break;
            case 'AKADAMA' :
                document.write("It will be a bit difficult to grown roots, but you are a tough little seed! Hope you can grow well!");
            break;
            case 'CLAY' :
                document.write("A hard rain comes in and your potato drowns.");
                //link to lose page
            break;
            default:
                document.write("Make sure you are spelling your answers correctly and typing them in all caps!");
        }
    }
</script>
</div>
</body>
</html>

I can not seem to figure out how to keep my html style the same when running javascript code. 我似乎无法弄清楚在运行javascript代码时如何保持我的html样式相同。 If anyone could help me out here, it would be much appreciated! 如果有人可以在这里帮助我，将不胜感激！

Answer 1

Using document.write will overwrite the complete document. 使用document.write将覆盖整个文档。

If you want to just change the content of the body, use: 如果只想更改正文的内容，请使用：

document.body.innerHTML = "Some text here";

That will keep the styling you want and replace the text at the same time. 这样可以保留您想要的样式，并同时替换文本。

Here's a JSFiddle showing the differences 这是展示差异的JSFiddle

Answer 2

Remember that document.write completely rewrites a page. 请记住，document.write完全重写了页面。
That's why also your style gets wiped. 这就是为什么您的样式也被抹掉的原因。

Try to add this code to your JS after the document.write 尝试在document.write之后将此代码添加到您的JS中

var css = '#game {width:1100}body{background-color:black}p{color:white}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
}else{
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

This will add a style tag to your head after the document.write so you should be ok! 这将在document.write之后在您的头部添加样式标签，因此您应该没事！

运行javascript代码时，网页样式会一直恢复为默认值

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-10-09 16:13:01

解决方案2
0 2014-10-09 16:18:44

运行javascript代码时，网页样式会一直恢复为默认值

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-10-09 16:13:01

解决方案2 0 2014-10-09 16:18:44

解决方案1
2 已采纳 2014-10-09 16:13:01

解决方案2
0 2014-10-09 16:18:44