单击颜色时如何更改整个站点的背景颜色或文本颜色？角答案

【问题标题】：how to change the background color or the text color of the whole site when clicking on a color ? Angular单击颜色时如何更改整个站点的背景颜色或文本颜色？角
【发布时间】：2021-02-19 07:45:48
【问题描述】：

当我从一个组件单击颜色到另一个组件时，如何更改整个站点的背景颜色或文本颜色？我需要使用输出装饰器，但如何使用？

style.component.html

<div>
    <h2>background colors</h2>
    <div class="theme-options">
        <div class="theme-white"></div>
        <div class="theme-blue"></div>
        <div class="theme-orange"></div>
        <div class="theme-green"></div>
    </div>
    <hr>
    <h2>text Color</h2>
    <div class="theme-options">
        <div class="theme-white"></div>
        <div class="theme-blue"></div>
        <div class="theme-orange"></div>
        <div class="theme-green"></div>
    </div>
</div>

app.component.html

<app-signin></app-signin>
<app-style></app-style>

【问题讨论】：

最简单的方法是使用 JS 向 body 添加一个类，该类应用在 css 中预设的更改
我是初学者，我该怎么做？ @tacoshy

标签： html css angular typescript

【解决方案1】：

我刚刚为background-color 做了一个精简版的演示。对于text-color，它的工作原理完全相同。

第 1 步：
我们需要为按钮/框添加一个唯一的onclick 触发器。因此，如果它们被按下，它们将触发一个脚本。

第 2 步：
我们添加了一个删除所有可能的类的函数，以使用document.querySelector("body").classList.remove("class"); 更改background-color。这将从 body 标记中删除可能的类。

第 3 步：
我们用add而不是remove添加相同的JS行来将想要的类添加到body标签：document.querySelector("body").classList.add("class");。

第 4 步：
我们将更改应用到 css 中的类

当然有可能削减脚本。但是我相信这种方式对于初学者来说是最容易理解和重现的。

function textWhite() {
  document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
  document.querySelector("body").classList.add("background-white");
}

function textBlue() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-blue");
}

function textOrange() {
  document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-green");
  document.querySelector("body").classList.add("background-orange");
}

function textGreen() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-blue");
document.querySelector("body").classList.add("background-green");
}

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

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

.background-orange {
  background-color: orange;
}

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

<body>
  <h2>background colors</h2>
  <div class="theme-options">
    <div onclick="textWhite()" class="theme-white">White</div>
    <div onclick="textBlue()" class="theme-blue">Blue</div>
    <div onclick="textOrange()" class="theme-orange">Orange</div>
    <div onclick="textGreen()" class="theme-green">Green</div>
  </div>
  <hr>
  <h2>text Color</h2>
  <div class="theme-options">
    <div class="theme-white">White</div>
    <div class="theme-blue">Blue</div>
    <div class="theme-orange">Orange</div>
    <div class="theme-green">Green</div>
  </div>
</body>

【讨论】：

感谢您的帮助，但是有像 output 和 ngstyle 这样的装饰器或其他可以帮助我的东西吗？
装饰器是 Angular Javascript 的一部分。最后，您还必须对它们进行编程，并且几乎以相同的方式工作。