Javascript 使用Skulpt更改HTML页面上代码输出的css_Javascript_Html_Css_Skulpt

Javascript 使用Skulpt更改HTML页面上代码输出的css

javascript html css

Javascript 使用Skulpt更改HTML页面上代码输出的css,javascript,html,css,skulpt,Javascript,Html,Css,Skulpt,我有以下程序（使用skulpt），它在点击“run”时在浏览器中生成python输出。输出代码位于“pre”标记中。我尝试了各种不同的方法来将CSS应用于执行的输出，但它不起作用这是我的css <style> .running { border: 20px outset black ; background-color: black; text-align: center; p: color:white; pre { white-space: p

我有以下程序（使用skulpt），它在点击“run”时在浏览器中生成python输出。输出代码位于“pre”标记中。我尝试了各种不同的方法来将CSS应用于执行的输出，但它不起作用

这是我的css

<style>
.running {
  border: 20px outset black ;
  background-color: black;    
  text-align: center;
  p: color:white;
  pre
{
    white-space: pre-wrap !important;
}   

}
</style>


.跑步{
边框：20px黑色；
背景色：黑色；
文本对齐：居中；
颜色：白色；
之前
{
空白：预包装！重要；
}   
}

这是代码的HTML部分。

<h3>Heading here</h3> 
<form> 
<textarea id="yourcode" cols="40" rows="10">
print("Hello World")
</textarea><br /> 
<button type="button" onclick="runit()">Run</button> 
<button type="button" onclick="clearit()">Clear</button> 
<button type="button" onclick="clearit()">--X--</button> 
<button type="button" onclick="clearit()">--Y--</button> 
<button type="button" onclick="clearit()">--Z--</button> 

</form> 
<br>
<br>
<br>
<div class="running">
    <pre id="output" ></pre> 
    <!-- If you want turtle graphics include a canvas -->
    <div id="mycanvas"> 
</div>

这里的标题
打印（“你好世界”）


跑
清楚的
--X--
--Y--
--Z--

我假设这是负责生成输出代码的原因：

<pre id="output" ></pre>

这是生成输出代码的javascript功能（供参考）

<body> 
<center>
<script type="text/javascript"> 
// output functions are configurable.  This one just appends some text
// to a pre element.
function outf(text) { 
    var mypre = document.getElementById("output"); 
    mypre.innerHTML = mypre.innerHTML + text; 
} 
function builtinRead(x) {
    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
            throw "File not found: '" + x + "'";
    return Sk.builtinFiles["files"][x];
}

// Here's everything you need to run a python program in skulpt
// grab the code from your textarea
// get a reference to your pre element for output
// configure the output function
// call Sk.importMainWithBody()
function runit() { 
   var prog = document.getElementById("yourcode").value; 
   var mypre = document.getElementById("output"); 
   mypre.innerHTML = ''; 
   Sk.pre = "output";
   Sk.configure({output:outf, read:builtinRead}); 
   (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
   var myPromise = Sk.misceval.asyncToPromise(function() {
       return Sk.importMainWithBody("<stdin>", false, prog, true);
   });
   myPromise.then(function(mod) {
       console.log('success');
   },
       function(err) {
       console.log(err.toString());
   });
} 

function clearit(){
    document.getElementById('yourcode').value = 'Your awesome code here';
    document.getElementById('output').innerHTML = '';
}
</script>


//输出功能是可配置的。这个只是附加了一些文本
//到一个前置元素。
功能输出（文本）{
var mypre=document.getElementById（“输出”）；
mypre.innerHTML=mypre.innerHTML+文本；
} 
函数内置读取（x）{
if（Sk.builtinFiles===未定义| | Sk.builtinFiles[“文件”][x]==未定义）
抛出“找不到文件：”“+x+””；
返回Sk.builtinFiles[“files”][x]；
}
//以下是在skulpt中运行python程序所需的所有信息
//从文本区域获取代码
//获取输出前元素的引用
//配置输出功能
//调用Sk.importMainWithBody（）命令
函数runit（）{
var prog=document.getElementById（“yourcode”）.value；
var mypre=document.getElementById（“输出”）；
mypre.innerHTML=''；
Sk.pre=“输出”；
configure（{output:outp，read:builtinRead}）；
（Sk.TurtleGraphics | |（Sk.TurtleGraphics={}））.target='mycanvas'；
var myPromise=Sk.misceval.asyncToPromise（函数（）{
返回Sk.importMainWithBody（“”，false，prog，true）；
});
myPromise.then（函数（mod）{
console.log（'success'）；
},
功能（err）{
log（err.toString（））；
});
} 
函数clearit（）{
document.getElementById（'yourcode'）。value='yourawesomecode here'；
document.getElementById（'output'）。innerHTML=''；
}

问：我如何格式化代码，使背景为黑色（此功能正常），但按“run”时输出的代码为白色

我不知道这是否是因为遗漏了一个ID——我注意到HTML中的pre标记有一个ID，或者css中的标记使用不正确。如能提供解释及解决方案（代码），将不胜感激

我在CSS中尝试过的其他东西：（也不起作用）


.跑步{
边框：20px黑色；
背景色：黑色；
文本对齐：居中；
颜色：白色；
前{
颜色：白色；
显示：块；
字体系列：monospace；
空白：预处理；
利润率：1米0；
}   
}

似乎

p：颜色：白色

是无效的css，因为

是元素而不是样式属性。相反，这行应该是

颜色：白色
下面的示例代码段：

。正在运行{
边框：20px黑色；
背景色：黑色；
文本对齐：居中；
颜色：白色；
前{
空白：预包装！重要；
}
}
这里的标题
打印（“你好世界”）


跑
清楚的
--X--
--Y--
--Z--






测试输出应为白色！

<style>
.running {
  border: 20px outset black ;
  background-color: black;    
  text-align: center;
  p: color:white;
  pre {
  color:white;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}   
}
</style>