angular 中的dom操作(原生JS)
<h2>这是一个home组件--DOM操作演示</h2>
<div id="box">
this is box
</div>
<br>
<div id="box1" *ngIf="flag">
this is box1
</div>
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit { public flag:boolean=true; constructor() { } ngOnInit() { //组件和指令初始化完成 并不是真正的dom加载完成 let oBox:any=document.getElementById('box'); console.log(oBox.innerHTML);
oBox.style.color="red"; //获取不到dom节点
/*
let oBox1:any=document.getElementById('box1'); console.log(oBox1.innerHTML);
oBox1.style.color="blue"; */ } //视图加载完成以后触发的方法 dom加载完成 (建议把dom操作放在这个里面)
ngAfterViewInit(){
let oBox1:any=document.getElementById('box1');
console.log(oBox1.innerHTML);
oBox1.style.color="blue"; } }
效果:
angular 中的dom操作(原生JS)的更多相关文章
- Angular @ViewChild,Angular 中的 dom 操作
Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.st ...
- Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法
<app-header #header></app-header> <div #myBox> 我是一个dom节点 </div> <button ( ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
随机推荐
- Make 和 Makefile快速入门
前言 一个项目,拥有成百上千的源程序文件,编译链接这些源文件都是有规则的.Makefile是整个工程的编译规则集合,只需要一个make命令,就可以实现“自动化编译”.make是一个解释makefile ...
- brew install thrift
➜ ~ brew install thriftUpdating Homebrew...Warning: You are using macOS 10.11.We (and Apple) do not ...
- The 2019 Asia Nanchang First Round Online Programming Contest The Nth Item
The Nth Item 思路: 先用特征根法求出通向公式,然后通向公式中出现了\(\sqrt{17}\),这个可以用二次剩余求出来,然后可以O(\(log(n)\))求出. 但是还不够,我们先对\( ...
- k8s的认证授权
一.ServiceAccount Service account是为了方便Pod里面的进程调用Kubernetes API或其他外部服务而设计的.它与User account不同 User acc ...
- 全球化 System.Globalization.CultureInfo与RegionInfo类
一.CultureInfo类:文化信息 分类: 1.中立文化(Neutral culture): zh-CHS:中文,无区域信息,无格式化信息 2.特定区域文化(Specific culture) z ...
- 2020还有9天!Winforms开发有哪些期待?DevExpress 2020计划出炉
下载DevExpress v19.2完整版 DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.DevExpress Winf ...
- python - Flask 基础 - 蓝图( Blueprint )(2)
""" 蓝图:为开发者提供的目录结构 - 使用: 1. 根目录创建一个跟项目名一样的文件 - 创建后第一步,在这个文件夹中添加一个 __init__.py 的配置文件 - ...
- h5css样式
兼容性前缀: 谷歌:webkit 火狐:moz ie:ms 欧鹏:o选择器: 属性选择器: * = 包含 {href * = 'www'} ^ = 以什么开头 $ = 以什么结尾 伪类选择器: 第一个 ...
- hive优化,开启压缩功能
1.开启hive作业mapreduce任务中间压缩功能: 对于数据进行压缩可以减少job中map和reduce task间的数据传输量.对于中间数据压缩,选择一个低cpu开销编/解码器要不选择一个压缩 ...
- 35 | join语句怎么优化?
在上一篇文章中,我和你介绍了 join 语句的两种算法,分别是 Index Nested-Loop Join(NLJ) 和 Block Nested-Loop Join(BNL). 我们发现在使用 N ...