动态更改元素 css 属性

Question

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

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

.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%;

}

Answer 1

类似这样的方法可能有效：

$(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>

Answer 2

您可以拥有两个具有所需背景的不同 css class。有一个 class 变量来保存您在 init 方法中切换的 class 名称并将其绑定到 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}

Answer 3

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

供参考

Answer 4

我是这样实现的：

注：这里很重要的部分就是这个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>

动态更改元素 css 属性

Change element css property dynamically

html

css

typescript

angular

ionic4