1 需求

  在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定;在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定

2 内置指令

  在angular中指令是作用在特定的DOM元素上的,目的是用来扩展元素的功能,为元素添加新的功能;angular框架本身提供的指令就叫做内置指令,例如:NgClass、NgStyle、NgIf、NgFor、NgSwitch等,利用NgClass、NgStyle和Class指令来动态绑定CSS样式

  技巧01:angular中的指令的类型首字母都是大写,但是在运用到DOM元素时需要将首字母变成小写,例如

    

3 利用NgClass指令实现CSS类绑定

  利用NgClass同时绑定一个或者多个CSS类

  3.1 NgClass绑定格式

    [ngClass]="{ CSS类名01:布尔类型,CSS类名:布尔类型 }"

    [ngClass]="styleMethod()"

    坑01:styleMethod是一个自定义的方法,该方法返回的是一个对象,该对象的格式是: { CSS类名01:布尔类型,CSS类名:布尔类型 }

    技巧01:对象的键最好用引号括起来,因为有的字符如果不用引号括起来就会报错,例如 _

    技巧02:对象的键值如果有特殊字符就需要用引号括起来,否则会报错(PS: 最好都用引号括起来)

  3.2 实际例子01

    <p [ngClass]="{style01: true, style02: true}">
Donnot aim for your success if you really want it. Just stick to do what you love and believe in.
</p>
.style01 {
color: yellow;
font-size: 14px;
}
.style02 {
background-color: red;
}

  3.3 实际例子02

    <p [ngClass]="styleMethod01()">
100% Capri employees model clothing while walking through the Bal Harbour Shops in Miami,
Florida, U.S., on Friday, Jan. 26, 2018. While some malls are desperately seeking financial
lifelines, Bal Harbour Shops is planning a $400 million expansion.
</p>
  styleMethod01() {
const style = {
style01: true,
style02: true
};
return style;
}
.style01 {
color: yellow;
font-size: 14px;
}
.style02 {
background-color: red;
}

  

  3.4 效果展示

    

    

4 利用NgStyle指令实现Style样式绑定

  利用NgStyle可以同时绑定一个或者多个内联样式的绑定

  4.1 NgStyle绑定格式

    [ngStyle]="{ 内联样式名称01:样式值,内联样式名称02:样式值}"

    [ngClass]="styleMethod()"

    坑01:styleMethod是一个自定义的方法,该方法返回的是一个对象,该对象的格式是:{ 内联样式名称01:样式值,内联样式名称02:样式值 }

    坑02:内联样式名称最好用引号括起来,样式值必须用引号括起来

    坑03:样式名称最好和CSS样式书写的格式保持一致,虽然有的样式名称可以进行一些变化,例如,CSS的写法是font_size,在NgStyle中的写法可以指font_size也可以是fontSize,只不过写成font_size时必须用引号括起来否则会报错,因为font_size里面包含了特殊字符

  4.2 实例例子01

    <p [ngStyle]="{color: 'red', 'font-size': '24px'}">
Shame may restrain what law does not prohibit.
</p>

  4.3 实际例子02

    <p [ngStyle]="styleMethod02()">
Shame may restrain what law does not prohibit.
</p>
  styleMethod02() {
const style = {
'color': 'red',
'font-size': '24px'
};
return style;
}

  4.4 实际效果展示

    

    

5 利用Class指令实现单个CSS类绑定

  Class指令只能绑定要给CSS类

  5.1 Class绑定格式

    [class.样式类名称]=“布尔类型”

    [class.样式类名称]=“styleMethod()”

    坑01:styleMethod是一个自定义方法,该方法的返回值必须是一个布尔类型

  5.2 实际例子01

    <p [class.style03]="true">
you know that all there is desire, thought, boding and longing;
</p>
.style03 {
color: skyblue;
font-size: 30px;
}

  5.3 实际例子02

    <p [class.style03]="styleMethod03()">
you know that all there is desire, thought, boding and longing;
</p>
  styleMethod03() {
return true;
}
.style03 {
color: skyblue;
font-size: 30px;
}

  5.4 效果展示

    

    

6 本博客代码汇总

  6.1 HTML代码

<div class="panel panel-primary">
<div class="panel-heading">动态设置class的三种方式</div>
<div class="panel-body">
<h3>利用ngClass指令实现</h3>
<p [ngClass]="{'style01': 'true', 'style02': 'true'}">
Donnot aim for your success if you really want it. Just stick to do what you love and believe in.
</p>
<p [ngClass]="styleMethod01()">
100% Capri employees model clothing while walking through the Bal Harbour Shops in Miami,
Florida, U.S., on Friday, Jan. 26, 2018. While some malls are desperately seeking financial
lifelines, Bal Harbour Shops is planning a $400 million expansion.
</p>
<hr /> <h3>利用ngStyle指令实现</h3>
<p [ngStyle]="{color: 'red', 'font-size': '24px'}">
Shame may restrain what law does not prohibit.
</p>
<p [ngStyle]="styleMethod02()">
Shame may restrain what law does not prohibit.
</p>
<hr /> <h3>利用class指令实现</h3>
<p [class.style03]="true">
you know that all there is desire, thought, boding and longing;
</p>
<p [class.style03]="styleMethod03()">
you know that all there is desire, thought, boding and longing;
</p> </div>
<div class="panel-footer">2018-3-8 10:14:57</div>
</div>

  6.2 CSS代码

.style01 {
color: yellow;
font-size: 14px;
}
.style02 {
background-color: red;
} .style03 {
color: skyblue;
font-size: 30px;
}

  6.4 TypeScript代码

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-test-demo',
templateUrl: './test-demo.component.html',
styleUrls: ['./test-demo.component.scss']
})
export class TestDemoComponent implements OnInit { constructor() { } ngOnInit() {
} styleMethod01() {
const style = {
style01: true,
style02: true
};
return style;
} styleMethod02() {
const style = {
'color': 'red',
'font-size': '24px'
};
return style;
} styleMethod03() {
return true;
} }

Angular21 动态绑定CSS样式的更多相关文章

  1. Vue之动态绑定CSS样式

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  2. Vue 动态绑定CSS样式

    今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4  使用进度条的话 就没有2.9. ...

  3. Vue 框架-05-动态绑定 css 样式

    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...

  4. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  5. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  7. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  8. 脚本工具(获取某个文件夹下的所有图片属性批量生成css样式)

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  9. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

随机推荐

  1. 简述TCP网络编程本质

    基于事件的非阻塞网络编程是编写高性能并发网络服务程序的主流模式,头一次使用这种模式编程需要转换思维模式 .把原来的"主动调用recv()来接收数据,主动调用accept()来接受连接,主动调 ...

  2. django-rest-framework快速入门

    前言:第一次接触django-rest-framework是在实习的时候.当时也不懂,看到视图用类方法写的感觉很牛逼的样子.因为官网是英文的,这对我的学习还是有一点的阻力的,所以当时也没怎么学.真是太 ...

  3. git恢复误删除文件

    在git仓库管理下误删除文件一般会分为以下3种情况: 1.手动直接删掉,如选择-右击-删除 这种删除未修改本地仓库[版本库],只修改了工作区,直接git checkout -- fileName即可恢 ...

  4. coredump故障分析

    如果一个程序运行3天后才会出错,这个时候 难道需要我们一直用GDB调试程序3天吗? 这个时候我们就需要使用到core  dump: 1.Core Dump又叫核心转存.当程序在运行过程中发生异常, 这 ...

  5. linear-grident的属性和使用以及对颜色后面参数(百分比)的理解

    linear-grident的属性和使用   css3新增Gradient属性,用来增加渐变的效果,渐变分为线性渐变 linear-grident 和 径向渐变 radial-grident,这篇文章 ...

  6. git使用基本故障

    warning: LF will be replaced by CRLF in README.md. The file will have its original line endings in y ...

  7. bzoj 3669: [Noi2014]魔法森林

    bzoj 3669: [Noi2014]魔法森林 Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号 ...

  8. Python世界里的赋值运算符

    Python赋值运算符 以下假设变量a为10,变量b为20: "=" 的作用是把右边的数值赋值给左边的变量 示例1:编程实现145893秒是几天几小时几分钟几秒钟? total = ...

  9. 使用js dom和jquery分别实现简单增删改

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  10. Python基础——条件判断

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 到目前为止,Python基础系列的文章中的程序都是一条一条语句顺序执行的.在本章中,我会重点介绍让程序选择是否执行语 ...