📅 最后修改于: 2023-12-03 15:08:30.653000 🧑 作者: Mango
在本教程中，我们将使用 CSS 来制作一个简单的 HTML CSS JS 编辑器。
创建 HTML 文件
首先，我们需要创建一个 HTML 文件，并在其中添加以下内容：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML CSS JS Editor</h1>
<div id="editor">
<textarea id="html" placeholder="Enter HTML code here"></textarea>
<textarea id="css" placeholder="Enter CSS code here"></textarea>
<textarea id="js" placeholder="Enter JavaScript code here"></textarea>
</div>
<iframe id="output"></iframe>
<script src="script.js"></script>
</body>
</html>
在 HTML 中，我们创建了一个包含 HTML、CSS 和 JS 编辑器的 div 元素，以及一个显示输出的 iframe 元素。
创建 CSS 文件
接下来，我们需要创建一个名为 style.css 的 CSS 文件，并添加以下样式：
body {
font-size: 16px;
font-family: sans-serif;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 1em 0;
}
#editor {
display: flex;
}
textarea {
width: 33.33%;
height: 400px;
padding: 1em;
border: none;
font-family: monospace;
resize: none;
}
#output {
width: 100%;
height: 400px;
border: none;
}
这些样式将帮助我们创建一个漂亮的编辑器界面。
创建 JS 文件
最后，我们需要创建一个名为 script.js 的 JS 文件，并添加以下代码：
const editor = document.getElementById('editor');
const html = document.getElementById('html');
const css = document.getElementById('css');
const js = document.getElementById('js');
const output = document.getElementById('output');
function update() {
output.contentWindow.document.open();
output.contentWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>Output</title>
<style>
${css.value}
</style>
</head>
<body>
${html.value}
<script>
${js.value}
</script>
</body>
</html>
`);
output.contentWindow.document.close();
}
html.addEventListener('input', update);
css.addEventListener('input', update);
js.addEventListener('input', update);
这些代码将通过 textarea 的内容更新输出 iframe。每当用户在任何一个 textarea 中输入内容时，update() 函数将被调用。
现在您已经了解了如何使用 CSS 制作一个简单的 HTML CSS JS 编辑器。您可以将此示例扩展到更复杂的编辑器并添加更多功能。