动态更改元素 css 属性答案

【问题标题】：Change element css property dynamically动态更改元素 css 属性
【发布时间】：2019-05-06 06:16:45
【问题描述】：

我需要动态设置背景图片。由于ion-content 是一个元素，我该怎么做？如果它是一个 css 类，那么我可以这样做

[class]="cssClassName" 我可以更改ts 文件中的类名。但是在这里我该怎么做呢？

.ts

ngOnInit() { this.init(); }

init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
       // has back ground
        break;
      case "com2":
       //no back ground
        break;
      default:
    }
  }

.html

<ion-content>

</ion-content>

.scss

ion-content {
    --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%;

}

【问题讨论】：

你打算怎么触发你的init()函数
它在这里运行ngOnInit() { this.init(); }@DCR

标签： html css angular typescript ionic4

【解决方案1】：

您可以拥有两个具有所需背景的不同 css 类。拥有一个类变量来保存您在 init 方法中切换的类名并将其绑定到 ion-content 组件应该这样做。

<ion-content [ngClass]="hotelBackground">
  ...
</ion-content>

ngOnInit() { this.init(); }
hotelBackground: string;
init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
       this.hotelBackground = 'com1';
       break;
      case "com2":
       this.hotelBackground = 'com2';
       break;
      default:
    }
  }

.scss

.com1 {background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; } 

.com2{ background: none}

【讨论】：

你能告诉我如何做.scss 部分吗？代码？
这是当前代码ion-content { --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; }
.com1 {background: url('/assets/img/com/background/background.png') 无重复 100% 100%; } .com2{ 背景：无}

【解决方案2】：

使用[class.<YOUR_CLASS_NAME>] = "<SOME CONDITION>" 在这里看到它的回答

Angular: conditional class with *ngClass供参考

【讨论】：

那该如何处理呢？ ion-content { --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%; }
使用css，您不能动态更改背景，您必须在ts 文件中进行此操作
怎么做？
首先动态获取image src并将其存储在局部变量中，然后在您的html模板中使用它
see this 在提问之前做一些研究

【解决方案3】：

我是这样实现的：

注意：这里非常重要的部分是ion-content.background-image

.scss

ion-content.background-image {
    --background: url('/assets/img/com/background/background.png') no-repeat 100% 100%;       
}

.ts

ngOnInit() { this.init(); }

init() {
    switch (environment.hotelEnvironment.hotelName) {
      case "com1":
        this.cssClassName = "";
        break;
      case "com2":
        this.cssClassName = "background-image";
        break;
      default:
    }
  }

.html

 <ion-content [ngClass]="cssClassName">

    </ion-content>

【讨论】：

【解决方案4】：

这样的事情可能会奏效：

$(document).ready(function() {
  $("button").click(function() {
    $(".content1").toggleClass("active");
  });
});

.content1.active {
  background-image: url('../images/light.png');
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Clicky</button>
<div class="content1"> Hello </div>

【讨论】：

我根本没有使用jQuery。这是Angular only 应用程序。