Javascript 设置生效前的预览

我正在为我的网站建立一个管理员页面，允许管理员更改一些小事情，如背景颜色、字体和其他不会影响页面布局的事情。我希望能够在将值写入数据库之前，使用php实时预览（正在进行的）更改，这些更改将成为永久性的。我的想法是，我将在表单旁边显示正在更改的页面，在该表单中可以选择页面中的不同设置。我想使用javascript更改的内容的CSS作为新的选择。这是可能的还是我需要换个方向看？我担心的是无法与页面内的页面进行交互。该页面是DOM的一部分，还是独立存在？现在我只是在头脑风暴，所以我没有任何代码可看。

实现所需结果的一种方法是修改所有元素的css或您想要针对的特定元素，如下所示

函数字体（ele）{
警报（“将H1 css更改为“+元素值”）；
var x=document.querySelectorAll（“h1”）；
for（设i=0；i

这是一个标题
H1字体：ArialTimesCourier

背景色：咖啡色

请提供更多信息。管理员是如何改变这些事情的？如果你只是改变正在加载的css文件，那就很简单了。您只需针对页面的默认css include（默认主题或其他内容），然后将源url更改为另一个主题的url。我的想法是将所有可变属性存储在MySQL数据库中，并使用php在页面加载时加载到CSS文件中。在web表单中为管理员提供选项，然后将新值写入数据库，这很容易。我的问题是预览版。我想加载正在更改的页面的副本，以便在管理员试图确定更改内容时，可以实时查看更改，而无需多次写入数据库。因此，您将css存储到数据库中，然后在保存后将其编译为css文件？这是我当前的计划。如果有更好的方法，我愿意接受建议。另一种方法是将一些类应用到你的body标签上，这些类应用了你想要更改的css。