如何在网页上一键添加多种颜色的 CSS 代码答案

【问题标题】：How to add CSS code for multiple color in one click on web page如何在网页上一键添加多种颜色的 CSS 代码
【发布时间】：2022-02-11 15:22:43
【问题描述】：

如何添加我们可以更改的 CSS。就像我们改变一个地方，整个网站的颜色都应该改变。

截图：screenshot for Sample

示例网站：https://themezhub.net/rikada-demo-05/rikada/index.html#

正如您在上面的网站中看到的，它们在左侧有一个滑块，其中包含一个颜色列表，如果您选择任何颜色，整个网站的颜色都会改变。

这样怎么弄？

例子：

我在 CSS 或网站的一个地方定义颜色代码，然后整个网站都应该根据它进行更改。

【问题讨论】：

看看developer.mozilla.org/en-US/docs/Web/CSS/…

标签： javascript php html css responsive-design

【解决方案1】：

您必须在单击左侧颜色上添加带有body 标签的类。然后为您要更新的每个元素添加颜色 CSS。

how the change color works on reference site

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

“我在CSS或网站的一个地方定义了颜色代码，然后整个网站都应该根据它进行更改。”

以上，是网页动态颜色的最佳想法。

示例代码：-

function change(color){
  $("body").removeClass();
  $("body").addClass(color);
}

body.black {
background-color : black;
color: white;
}

body.black .heading_1{
  font-size: 30px;
  font-weight : bold;
}

body.red {
background-color : red;
color: white;
}

body.red .heading_2{
  font-size: 30px;
  font-weight : bold;
}

body.green {
background-color : green;
color: white;
}

body.green .heading_3{
  font-size: 30px;
  font-weight : bold;
}

body.blue {
background-color : blue;
color: white;
}

body.blue .heading_4{
  font-size: 30px;
  font-weight : bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body class="black">
<span class="heading_1"> This is Black </span><br/>
<span class="heading_2"> This is Red </span><br/>
<span class="heading_3"> This is Green </span><br/>
<span class="heading_4"> This is Blue </span><br/>
<br/>
<button onclick="change('black')"> Black </button>
<button onclick="change('red')"> Red </button>
<button onclick="change('green')"> Green </button>
<button onclick="change('blue')"> Blue </button>
</body>
</html>

您可以为页面上的任何元素 (I have it on heading in my case) 定义任何样式，也可以为页面上要更改样式的任何元素 (body.<class> in my case) 定义任何类对于其他元素。

【讨论】：