重庆分公司 重庆分公司

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们
028-86922220

• 网站建设
• 网站制作
• 网站营销
• 小程序
• 新闻动态
• 成功案例
• 关于我们

let element = document.getElementById('exampleTarget');

element.className = 'additional-class'

基于条件切换 css 的类

当基于某些条件切换 css 的类的时候，上述的方式就稍显繁琐：

既不美观也不太好理解。

我们可以使用：

来实现上述的需求。

更好的使用 ngClass 指令

上述的所有添加类的方式，都可以使用 ngClass 来替代。

该指令只是语法糖，可以是代码看起来更加简洁明了。

像我们使用 ngClass 指令来完成上面的两个示例：

除了上述的方式， ngClass 还有一些其他的常用方式：

更多使用方式请查看： 官方文档

需要注意的是：

如果在组件的 ts 文件中使用 HostBinding 添加了多个类：

export class AppExampleComponent implements OnInit {
  @HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';
  // ...
}

那么在使用的时候，则不能在通过 class 、className 、ngClass ，添加类。

关于“angular中为HTML元素添加css类的方法有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。