html、angular样式隐藏或显示div的几种方式

已于 2022-08-18 14:47:54 修改
阅读量1.3k 收藏 1
点赞数
分类专栏： 学习心得 文章标签： angular.js html javascript
于 2022-06-17 15:42:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44423801/article/details/125332603
版权

1.Dom树里 移除该元素

<div *ngIf="isShow"></div>

2.Dom树里 有该元素，只是隐藏

1.在隐藏之后不再占据空间
（1）display:none   可能会导致样式错位
（2）[hidden]="isShow" 
（3）ng-show属性
（4）height:0;overflow:hidden  两个属性搭配使用可使元素隐藏
（5）对于input框，设置它的属性 type：hidden 也可使元素隐藏
	[ngStyle]="{'display':isShow? '' : 'none' }"
2.在隐藏之后占据空间
（1）visibility:hidden 
（2）opacity:0  设置图片透明度为0，隐藏元素
Larrywjk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular 内容的显示和隐藏： component.ts变量控制＜span＞内容显示隐藏 ng-show/ng-hide/ng-if/ng-switch,hidden
weixin_41147129的博客
10-20 4010
显示和隐藏元素是, Angular是通过修改数据模型DOM的方式来驱动UI刷新，然后通过指令把变更反应到UI上。 ngIf,ngFor… 在angular里被称为是结构型指令.所谓结构型指令,就是它能够塑造或重塑DOM的结构. 说句话就是在渲染的时候它能够帮你增加,删除,维护这些元素. ng-show/ng-hide: ng-show是满足条件就展示,ng-hide是满足条件就隐藏. 因为 它们用法差不多,所以下面就单纯讲ng-show. ng-show接收的是一个boolean值,当为值true的时候就去
Angular实现点击按钮控制隐藏和显示功能示例
10-18
主要介绍了Angular实现点击按钮控制隐藏和显示功能,结合实例形式分析了AngularJS简单控制页面元素显示与隐藏的相关操作技巧,需要的朋友可以参考下
AngularJS：div显示或隐藏
qq_37809783的博客
08-15 5604
使用ng-show在div中显示或隐藏div操作： eg: &lt;div ng-show= "show"&gt; &lt;span&gt;显示按钮&lt;/span&gt; &lt;/div&gt; 1.点击显示按钮 &lt;div ng-click = "show = true"&gt; &lt;button&gt; click show &lt;
angular学习笔记(八)-控制视图显示隐藏
05-08 448
本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: ...
angular中的显示与隐藏ng-show/ng-hide/ng-if/ng-switch
...
02-03 6756
angular中用来控制元素是否展示的指令分别有,ng-show/ng-hide/ng-if和ng-switch. ng-show/ng-hide: ng-show是满足条件就展示,ng-hide是满足条件就隐藏. 因为它们用法差不多,所以下面就单纯讲ng-show. ng-show接收的是一个boolean值,当为值true的时候就去展示DOM节点,当值为false的时候,在dom节点上
AngularJS控制div隐藏或显示-ng-show
weixin_34167819的博客
07-26 2329
2019独角兽企业重金招聘Python工程师标准>>> ...
AngularJS中关于ng-class指令的几种实现方式详解
10-21
开发者可以根据具体需求选择合适的方式，无论是简单的双向绑定，还是通过对象数组或key/value方式。熟练掌握这些技巧，可以提高代码的可维护性和可扩展性，同时简化问题的解决方案。在实际项目中，灵活运用这些指令...
浅谈Angular7 项目开发总结
10-17
在这篇文章中，作者根据自身在使用Angular7进行项目开发中遇到的问题，做了全面的总结，涉及到锚点使用、组件样式的修改、自定义属性添加、第三方插件引入方式以及滚动事件监听等几个方面。 首先，关于锚点的使用，...
关于angular浏览器兼容性问题的解决方案
10-15
解决这个问题的方法有以下几种： 1. **放弃使用固定列**：如果产品需求允许，可以选择不使用`nzLeft`和`nzRight`指令，这样在所有浏览器中展示效果将保持一致。 2. **针对Edge浏览器降级处理**：使Edge浏览器的表现...
使用Angular 6创建各种动画效果的方法
10-17
2. **Wildcard状态**：也称为元素的默认状态，无论元素处于何种动画状态，都会应用这个状态的样式。在代码中，我们使用通配符`*`来表示。 3. **Custom状态**：这是自定义的状态，开发者可以为元素指定任意名称，...
AngularJS中实现显示或隐藏动画效果的方式总结
11-24
AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。 本篇体验在AngularJS中实现在”显示/隐藏”这2种状态切换间添加动画效果。 通过CSS方式实现显示/隐藏动画效果 思路： →npm install angular-animage →依赖：var app = angular.module(“app”,[“ngAnimate”]); →controller中一个变量接收bool值 →界面中提供一个按钮，点击改变bool值 →界面中显示/隐藏的区域提供ng-if和controller中
Javascript动态创建div的方法
10-24
以上介绍了JavaScript动态创建div元素的几种方法和相关知识点。通过这些方法，开发者可以灵活地控制页面内容，实现各种交互效果。但是，随着Web技术的发展，现代前端开发越来越依赖于框架和库来处理这些操作，这使得...
angular 点击div区域外div隐藏
qq_39252703的博客
08-13 1573
import { ElementRef, HostListener, ViewChildren, QueryList } from '@angular/core'; <div #unclick></div> <div class="unclick">区域外</Div>
在angular项目中，如何获取通过已渲染的视图控制显示与隐藏的另一个部分的视图的DOM元素
最新发布
qq_44327851的博客
09-10 172
在`ngAfterViewInit`生命周期钩子函数中，可以访问和操作`additionalUIRef.nativeElement`，即这部分UI的DOM元素。可以添加事件监听等操作。这样，一开始只会渲染部分UI，当点击按钮时，`showAdditionalUI`变量的值会变为`true`，从而渲染并显示另外部分的UI。来实现一开始只加载部分UI，然后通过点击已加载出来的UI的图标来显示另外部分的UI，并获取这部分UI的DOM元素进行事件监听。首先，可以使用`*ngIf`指令来根据条件渲染部分UI。
angular的添加隐藏于显示
aigaoaodemo的博客
12-08 894
//隐藏 默认为隐藏 <input type="button" value="添加" ng-click="xianshi()"/> //隐藏的添加的用户表单 ng-show="xs">   添加用户信息   姓名: type="text" ng-model="name1"/>   年龄: type="text" ng-
angular标签的显示和隐藏
sanlingwu的博客
10-25 5895
html：         Toggle Menu         ng-show='menuState.show'>             Stun             Disintegrate             Erase from history           js： var myCSSModule = angular.module('MyC
angular的几种元素隐藏的方式
huygo的博客
11-16 1682
ng-show和ng-if 等几个隐藏显示元素的方法。 [html] view plain copy   >   html>       head>           meta charset="UTF-8">           title>title>           script src="day2/src/angular.j
angular8 Renderer2 获取div子级标签
03-25
可以使用Renderer2的query方法来获取div子级标签。具体代码如下： ```typescript import { Component, Renderer2, ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div #myDiv> <p>子级标签1</p> <p>子级标签2</p> </div> `, }) export class AppComponent { @ViewChild('myDiv', { static: true }) myDiv: ElementRef; constructor(private renderer: Renderer2) {} ngAfterViewInit() { const divEls = this.renderer.selectores('p', this.myDiv.nativeElement); console.log(divEls); } } ``` 这段代码中，我们通过@ViewChild获取了模板中的div元素，并在ngAfterViewInit生命周期钩子中通过Renderer2的selectores方法来获取div子级的所有p标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值