angular中为HTML元素添加css类的方法有哪些
这篇文章将为大家详细讲解有关angular中为HTML元素添加css类的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联服务项目包括江岸网站建设、江岸网站制作、江岸网页制作以及江岸网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,江岸网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到江岸省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现,包括 className 指令的使用,NgClass 的使用等。
原生 JavaScript 为元素添加一个类
主要代码是:
let element = document.getElementById('exampleTarget'); element.className = 'additional-class'
更具体的解释在 className 的用法 ,这里不在赘述。
使用 [className] 属性绑定在 Angular 中添加 css 类
可以简单的使用 className
为我们的 HTML element 绑定类:
当然使用此属性绑定静态类并无太大的意义,我们可以根据条件绑定相关的类:
在 condition
为 true
的时候,会添加 condition-true-example-class
类,为 false
的时候会添加 false-example-class
类。
同样,我们还可以写入其他的简单的判别:
基于条件切换 css 的类
当基于某些条件切换 css 的类的时候,上述的方式就稍显繁琐: