Question

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

Answer 1

您可以实现所需结果的一种方法是修改所有元素的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>

在设置生效之前预览设置

1 个答案: