html - 能够从内置样式选择工具更改网站 CSS

Question

我想创建一个如图所示的工具 here用户可以动态更改网页的样式。

我已经四处搜索，但仍然不完全确定我该怎么做。

任何关于在哪里寻求实现这样的目标的方向将不胜感激!

Answer 1

首先您需要为用户创建一些方法来选择他们想要在界面中使用的颜色，然后将该值存储在一个字符串中，例如“userColour”。您需要确保它是一个有效的 CSS 颜色值，因此可以是“#33aa55”或“绿色”(查看命名颜色的 CSS 引用，这将更容易实现)。

如果您在构成页面的 div 和 span 等上使用类或 ID 定义页面的 HTML，如下所示:

<div class="myColour"> your content </div>

或

<div id="myColour"> your content </div>

然后你可以使用 Javascript 像这样更改 css 属性:

document.getElementsByClassName("myColour").style.background-color = userColour;

或

document.getElementById("myColour").style.background-color = userColour;

分别为class和id。

您还可以使用 jQuery 之类的东西，它可以为您提供更好的浏览器兼容性和更轻松的 DOM 操作，以便动态地将样式应用于您的标记，但原理是相同的。