Question

我正在使用浏览器实时HTML / CSS代码编辑器进行工作。我遇到的麻烦是将用户键入的CSS样式应用于div预览窗格。

我目前拥有的是

   <html lang="en">
<head>
<meta charset="utf-8">
    <title>Code Editor</title>
    <style>
        .wrapper{
            width: 100%;
        }
        .textWrapper {
            width: 30%;
            height: 100%;
            float: left;
        }
        #css{
            height: 300px;
            width: 100%;            
        }
        #html {
            height: 300px;
            width: 100%;
        }
        #preview {
            height:600px;
            width: 400px;
            float:left;
            border:2px solid black;
            margin: 20px;
        }


    </style>

</head>
    <body>
    <div class ="wrapper">
        <div class ="textWrapper">
        <textarea placeholder="CSS..." id="css"></textarea>
        <textarea placeholder="HTML..." id="html"></textarea>
        </div>
        <div id="preview"></div>
        <button onclick="launch()">Launch</button>
        <button onclick="toggleCSS()">Toggle</button>
        <button onclick="clear()">Clear</button>

        <script src="bebk9hScripts.js"></script>
    </div> 
    </body>
</html>

以及我的脚本页面

function launch() { 
    document.getElementById("preview").innerHTML = document.getElementById("html").value;
} 


function toggleCSS() {

    document.getElementById("preview").style = document.getElementById("css").value;
}

但这不起作用。有什么建议么？我也意识到使用iframe会更容易，但我们不应该这样做。

Answer 1

完成您要尝试执行的操作的一种简单有效的方法是设置innerHTML元素的preview。只要您在preview元素之前考虑了所有必要的依赖关系，这就不会阻止您以任何方式使用HTML，CSS或JavaScript。简单的实现是：

  var preview = document.getElementById("preview");
  var html = document.getElementById("html").value;
  var css = document.getElementById("css").value;

  preview.innerHTML = html;
  preview.innerHTML += '<style>' + css + '</style>';

但是，作为一个处于非常快速的环境中的开发人员，我可以坦白地说，当您尝试快速更新内容时，使用间隔刷新预览非常感激。刷新间隔的快慢取决于您，也可以为用户设置更新间隔。

请记住，使用间隔会导致不良行为，例如动画被截断等。这就是为什么许多在线代码编辑器使用 refresh 或 run 按钮放在首位。但我想指出利用我们可用的keyup事件的有用性。

将keyup事件与计时器，手动刷新按钮和间隔时间结合起来是我的建议：

var html = document.getElementById("html");
var css = document.getElementById("css");

// Use the `keyup` event as a primary check for updates.
var keyDelay = 1000;
var keyRecieved = false;
var timeSinceLastKeyRecievedInMilliseconds = 0;
document.addEventListener('keyup', prepareForRefresh);
function prepareForRefresh() {
	keyRecieved = true;
	timeSinceLastKeyRecievedInMilliseconds = 0;
}
function update() {
	var preview = document.getElementById("preview");
  	preview.innerHTML = html.value;
  	preview.innerHTML += '<style>' + css.value + '</style>';
}

// Use an interval for checking if we should update.
setInterval(function() {
	if (keyRecieved) {
		timeSinceLastKeyRecievedInMilliseconds += 100;
		if (timeSinceLastKeyRecievedInMilliseconds >= keyDelay) {
			timeSinceLastKeyRecievedInMilliseconds = 0;
            keyRecieved = false;
			update();
		}
	}
}, 100);

// Use a high interval as a fail-safe for flukes.
var interval = 180000;
setInterval(update, interval);

input[type=text] {
	margin: 5px;
	background-color: #fffa;
	border: 2px solid transparent;
	border-bottom: 2px solid #fff;
	border-radius: 5px;
}
.update {
	width: 20%;
	padding: 10px;
	margin: 5px;
	background-color: #f33a;
	cursor: pointer;
	user-select: none;
}
.primary-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
html, body { overflow-y: auto; }

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2940219/PerpetualJ.css" rel="stylesheet"/>
<div id="primary-content" class="primary-content">
	<input id="html" type="text" placeholder="HTML" />
	<input id="css" type="text" placeholder="CSS" />
	<div class="update" onclick="update();">Refresh</div>
	<div id="preview"></div>
	<div id="refresh-preview"></div>
</div>

上面的简单示例利用了keyup事件，用于检测自用户提供输入以来已经有多长时间的计时器以及较长的间隔作为故障保护的组合。这接近于CodePen使用的方法，我强烈建议将其用于Web集中的编辑器。随时以on CodePen上最简单的形式查看我的实现。

Answer 2

您的代码有效！

编辑：嗯，至少是这样。它仅将样式直接应用于preview元素，而不应用于其子元素（请参见本文下方的评论）。

以下是我的旧答案：

这没什么问题，问题必须出在其他地方。
我想到的可能的问题是：

用户输入的CSS无效，或被其他样式表覆盖
更新文件的Javascript函数未触发
Javascript中引用的元素是错误的

以下是使用您的代码的最小工作示例：

function toggleCSS() {
    document.getElementById("preview").style = document.getElementById("css").value;
}

document.getElementById("apply_css").onclick = toggleCSS;

<textarea id="css" cols="40" rows="5">
  width: 150px;
  height: 100px;
  border: 1px solid green;
  background: rgb(170, 200, 250);
</textarea>
<br>
<button id="apply_css">Apply CSS!</button>
<br>
<div id="preview"></div>

如何使用JavaScript更改div的所有style属性？

2 个答案: