时间戳

首页 > 解决方案 > 在角度应用程序中更改背景颜色

html - 在角度应用程序中更改背景颜色

问题描述

我正在开发一个角度应用程序。我有一个 css 类，其中具有,等div一般属性。 html 代码是这样的。fontpaddingbackground-color

<div class="myCss">
  //my code
</div>

在 CSS 文件中，有这样的 CSS

div.myCss {
 color: white;
 font-size: 23px;
 background-color: yellow;
}

对于某种情况，我需要改变background-color. 如果myFlag是真的，我想background-color是黑色的，否则是黄色的。我尝试使用ngClass，但是当myFlag == true我需要编写整个 css 来更改时background-color。有什么办法吗，我只能background-color在标志的基础上进行更改，而不是创建一个与以前的属性完全相同的新css类，只是改变背景颜色。

  1. 我在html中有如下表格：

    1 2 3 4 5

在css类中我有以下css：

table th {
    border-collapse: collapse;
    color: white;
    background-color: #002BA4;
    padding: 3px 4px 3px 4px;
}

对于同一个标志，我也想改变background-color它th。我怎么能做到这一点？

标签： htmlcssangularangular8

解决方案

有两种方法可以解决这个问题：

选项1

创建一个变量来存储样式，例如，这将允许您能够在模板中多次使用此变量。

let color = myFlag? 'black' : 'yellow';

然后在您的模板中，您可以这样做：

<div [className]="color"></div>

但是，这仅设置类名，因此您仍然需要设置这些类的样式。

.black{
   background-color: black;
}

.yellow{
   background-color: yellow;
}

选项 2

您可以像这样使用样式绑定：

<div [style.backgroundColor]="!myFlag ? 'yellow': 'black'" ></div>

如果您希望更改background-color.

推荐阅读