Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >关于angular 通过变量来控制样式两种方法可以实现该效果

关于angular 通过变量来控制样式两种方法可以实现该效果

作者头像
用户1437675
发布于 2018-08-20 03:22:59
发布于 2018-08-20 03:22:59
8590
举报
文章被收录于专栏:Angular&服务Angular&服务

两种方法可以实现该效果

1. [ngStyle]="{'height':'100px'}"

基本使用方法[ngStyle]="{'height':'100px'}"

判断添加

[ngStyle="{'height': true ? '100px':'0px'}"]

2. [ngClass="{text-conter}"]

[ngClass="{text-center: true}"] 表示当前dom添加样式text-center class样式

[ngClass="{text-center: false}"] 表示当前dom不添加样式text-center class样式

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.12.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Angular 组件样式
但某些时候我们需要根据不同的条件,为指定元素应用不同的样式。对于这种场景,我们可以使用属性绑定,如:
阿宝哥
2019/11/05
2K0
Angular核心概念:数据绑定
测试:在NG表达式可以执行哪些代码?(Y表示可以,N表示不可以) 算术运算:Y。比较运算:Y。逻辑运算:Y。三目运算:Y。 调用函数:Y。创建对象:N。JSON序列化:N。 NG表达式禁止出现new关键字。NG表达式中JSON是undefined。 结果展示:
用户9857551
2022/06/28
3.7K0
Angular核心概念:数据绑定
Angular 6.x 基础教程
若想进一步了解 Angular CLI 的详细信息,请参考 Angular CLI 终极指南。
阿宝哥
2019/11/05
15.9K0
如何完成响应式布局,有几种方法?看这个就够了
[前端CSS高频面试题]如何画0.5px的边框线(详解) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会) CSS3 Z—Index 详解 CSS3 positon定位详解(通俗易懂)
坚毅的小解同志的前端社区
2022/11/28
1.1K0
如何完成响应式布局,有几种方法?看这个就够了
【Angular教程】-组件初识|8月更文挑战
前提: 准备一个空的angular项目(ng new angular-course)
前端小鑫同学
2022/12/25
2K0
【Angular教程】-组件初识|8月更文挑战
angular组件的基本使用
angular组件的基本使用 组件 组件模板 ng generate component xxx 新建组件(大驼峰命名) 属性绑定 <img [src]="imgSrc" /> public imgSrc:string="./assets/imgs/1.jpg"; 事件绑定 <button class="btn btn-success" (click)="btnClick($event)">测试事件</button> public btnClick(event):void{ alert
一个淡定的打工菜鸟
2022/08/23
1.6K0
Angular 从入坑到挖坑 - 组件食用指南
angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现
程序员宇说
2020/02/25
16.1K0
Angular 从入坑到挖坑 - 组件食用指南
每日分享html之两个input搜索框、两个button按钮、一个logo效果
动态效果,如缩放,覆盖,滑出网页或单个视觉元素,可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。
淼学派对
2022/11/20
1.1K0
每日分享html之两个input搜索框、两个button按钮、一个logo效果
web前端面试中10个关于css高频面试题,你都会吗?
BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
coder_koala
2019/07/30
2.9K0
vue弹窗屏蔽滑动的两种解决方案
  在开发过程中,我们经常会遇到要加弹窗的需求,而如果当前页的展示数据一屏展示不完,则在打开弹窗后,有滑动操作时,页面也会随之滑动。那么如何处理这一问题呢?
流眸
2019/08/12
2K0
vue弹窗屏蔽滑动的两种解决方案
修改elementUI的el-popconfirm 气泡确认框样式不起效果
1.元素没有取对(其实一般改这种官方组件,不是写一长串的类名,以及深度处理器;相反它反而很简单,外面写一个组件定义的类名,里面写这个组件封装的类名就好了) 2.可以用不加scoped的全局样式 3.看elementUI官方文档,里面有一个poper-class属性
程序媛夏天
2024/01/18
9010
修改elementUI的el-popconfirm 气泡确认框样式不起效果
JavaScript事件与例子(三)
两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,从而进行操作 1.通过设置属性的方式判断选中的元素 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://ww
二十三年蝉
2018/02/27
6930
前端面经笔记 - wuuconix's blog
上个月才下定目标,决定找一份前端的工作,在这之前我对我应该选择什么岗位是迷茫的,前端?后端?安全岗?
wuuconix
2023/03/16
2.8K0
前端面经笔记 - wuuconix's blog
jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)
Python攻城狮
2018/08/23
2.4K0
jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示
情人节程序员用HTML网页表白【情人节表白网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
1 网页简介:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
IT司马青衫
2022/08/21
2.8K1
情人节程序员用HTML网页表白【情人节表白网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
Angular练习之animations动画二
引入动画模块>创建动画对象>在动画载体上使用。我觉得其核心的内容在创建动画对象上,今天我们就来练习创建不同的动画对象trigger
易兒善
2018/08/21
9380
Angular练习之animations动画二
49个常用的CSS代码片段,建议整理收藏
text-shadow 为网页字体添加阴影,通过对text-shadow属性设置相关的属性值。
前端达人
2021/07/16
2.2K0
重温前端-css篇
q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255, 0, 0)”。
kif
2023/03/10
8750
Javascript(2)-js进阶
备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是相对浏览器窗口的距离
Python攻城狮
2018/08/23
1.4K0
Javascript(2)-js进阶
angular 模板常用语法
报错:Can’t bind to ‘colspan’ since it isn’t a known property of ‘td’. 原因:clspan是HTML属性而不是DOM属性 正确写法:
路过君
2020/06/19
1.1K0
相关推荐
Angular 组件样式
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档