Question

我想为最终用户实现选项，使他们能够在页面上更改（css）样式。例如，当他们在样式页面上时，他们可以点击标题并弹出将在其中友好的用户界面中选择背景颜色，文本颜色，边框，填充...只需单击

在jquery插件或...中可以使用这样的东西

Answer 1

看看这个：http://usejquery.com/posts/brosho-design-in-the-browser-jquery-plugin

Answer 2

你可以用一些代码来实现：演示：https://cdpn.io/harshavardhana-holla-gmail-com/debug/yLVLYeQ/RBrOJRNNRooM

<!DOCTYPE HTML>
<html>
    <head>
       <style> textarea, iframe
       {
border:2px solid #400040;
height:600px;
width:100%;
}
</style>
     </head>
     <body><table border="2" width="100%" height="100%"> <tr bgcolor="#efdfff"><th>
     <table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
     <tr>
<td width="50%" scope="col">  </td> 
<td width="50%" scope="col" align="left"> 
   <center><input onclick="runCode();" type="button" value= "Run Code!"></center>
</td>
</tr>
<td>
<form>
<center><b>Paste Your Code here!</b></center>
<textarea name="sourceCode" id="sourceCode">
<html>
<head> <title>My Codes</title> </head>
<body>
<h1> Welcome Coders!</h1>
<p> Write HTML, Javascript or CSS here & click run code!</p>
</body> 
</html>
</textarea>
</form>
</td>

<td><b><center>Output</b></center>
<iframe name="targetCode"  id="targetCode"> </iframe> </td>
</table>
<script>
function runCode() {
var content = document.getElementById('sourceCode').value;
var iframe = document.getElementById('targetCode');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document: 
iframe.contentDocument;

iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
runCode();
</script>
</tr>
</th>
</table>
</body>
</html>

我创建了一些显示结果的 iframe！

jss中的css编辑器，js

2 个答案: