动态更改自动生成的CSS

Question

你能告诉我如何动态更改css吗？这里的问题是，css是由框架本身生成的。所以我不能宣布或改变它。

这是在运行时：

我需要选择swiper-pagination-bullets类，需要有条件地给出最低价值。像这样：

注意：这只是伪：

If="data!=null" {     
   .swiper-pagination-bullets {
            bottom: 190px !important;
        }
}
else{
  .swiper-pagination-bullets {
            bottom: 150px !important;
        }
}

Answer 1

不是动态更改CSS，而是通过在运行时动态地将样式表注入页面来覆盖它。

const style = document.createElement('style');
const bottom = condition ? 190 : 150;
style.insertRule(`.swiper-pagination-bullets { bottom: ${bottom}px; }`, 1);
document.head.appendChild(style);

我尽量避免使用!important。如果以上面显示的方式注入样式表，它将优先于现有样式，因为它出现在页面的后面，假设选择器的特殊性相同。

否则你可以尝试通过.swiper-pagination-bullets.swiper-pagination-bullets人为地增加特异性（按你认为合适的方式重复）。如果无效，请使用!important。

从here获取的样式表注入代码。

Answer 2

就像评论中提到的@Duannx一样，您可以有条件地在ion-slides元素中添加一个类，然后根据该类将css样式规则应用于寻呼机。

<ion-slides pager="true" [class.with-data]="data" ...>
    <ion-slide *ngFor="...">
        <!-- ... -->
    </ion-slide>
</ion-slides>

您需要更改[class.with-data]="data"并将其替换为组件中的不动产，但您可以在SCSS文件中使用它来更改寻呼机的样式：

ion-slides.with-data .swiper-pagination-bullets {     
    bottom: 190px !important;
}

ion-slides:not(.with-data) .swiper-pagination-bullets {
    bottom: 150px !important;
}