設置在生效之前進行預覽

我正在爲我的網站構建一個管理頁面，這將允許管理員更改小的東西，如背景顏色，字體和其他不會影響頁面佈局的東西。我希望能夠在將值寫入數據庫之前實時預覽更改（使用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

設置在生效之前進行預覽

回答

相關問題