Javascript 动态更改自动生成的CSS

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

这是在运行时：

我需要选择

swiper分页项目符号

类，并需要有条件地给出底部值。像这样：

注意：这只是一个伪：

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

---

与其动态地更改CSS，不如在运行时动态地向页面中注入样式表来覆盖它

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

我会尽量避免使用

！重要信息

。如果您以上面所示的方式注入样式表，它将优先于现有样式，因为它稍后会出现在页面上，并假定具有相同的选择器特性

或者，您可以尝试通过执行

.swiper分页项目符号.swiper分页项目符号

（根据需要重复）来人为增加特异性。如果不起作用，请使用

！重要信息

---

样式表注入代码取自。

就像注释中提到的@duanx一样，您可以有条件地在离子幻灯片元素中添加一个类，然后基于该类将css样式规则应用于寻呼机

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

---

你试过了吗！重要的内部@媒体查询？这可能会起作用，并使其同时具有响应性。这与媒体查询有何联系？我需要在移动设备上使用它。此处没有设备大小更改。有线索吗@JonnyI不知道这只是手机。但是，如果你在一个特定的决议中宣布一个变更，它可能会绕过并帮助你。此处没有分辨率或设备大小更改。我只需要根据条件应用不同的类。我已经在上面的伪模式中展示了它@首先，它是类，而不是css。其次，您可以通过

[class.foo]=“true/false”

添加/删除类，非常感谢。我真的很喜欢用角度/离子的方式。公认的答案就是这样+1虽然：）不客气（：我不知道你想要一个角度/离子的方式，否则我不会建议。也许你可以在以后的标签中添加这些关键词到标题或问题中（：哦..这太棒了。非常感谢：）很高兴听到@Sampath:）

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

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