设置在生效之前进行预览

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

来源

2017-02-20 beewrangler

请提供进一步的信息。管理员如何改变这些事情？ –

如果你只是改变正在加载的css文件，那很简单。你只需要为你的页面设置默认的CSS包括（默认主题或其他），然后你只需要将源URL改为其他主题的URL即可。这应该够了吧。 – Blakethepatton

我的想法是将所有可更改的属性存储在加载到CSS文件的MySQL数据库中，在页面加载时使用php。它很容易为管理员提供Web表单中的选项，然后将新值写入数据库。我的问题是预览。我想加载正在更改的页面的副本，以便在管理员试图找出他们想要的内容时，可以实时查看更改，而无需多次写入数据库。 – beewrangler

您可以实现所需结果的一种方法是修改所有元素的CSS或您想要定位的特定元素，如下所示。

function font(ele){ 
 
    alert("Changed H1 css to "+ele.value); 
 
    var x = document.querySelectorAll("h1"); 
 
    for (let i = 0; i < x.length; i++) { 
 
     x[i].style.fontFamily=ele.value; 
 
    } 
 
} 
 
function background(ele){ 
 
    document.body.style.background=ele.value; 
 
    alert("Changed background color to "+ele.value); 
 
}

<body> 
 
<h1>This is a header</h1> 
 

 
H1 Font: <select onchange="font(this)"><option value="Arial">Arial</option><option value="Times">Times</option><option value="Courier">Courier</option></select><br> 
 
Background Color: <select onchange="background(this)"><option value="#C0FFEE">Coffee</option><option value="#C55">CSS</option><option value="#1CE">ICE</option></select> 
 
</body>

来源

2017-02-20 23:17:03 Blakethepatton

另一种方法是将一些类应用到您的身体标记，并应用您想要更改的CSS。 – Blakethepatton

设置在生效之前进行预览

回答

相关问题