zoukankan      html  css  js  c++  java
  • 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";
    
      }
    
    }

    效果:

  • 相关阅读:
    C语言寒假大作战01
    C语言I作业12—学期总结
    C语言I博客作业11
    C语言I博客作业10
    非数值数据的编码方式
    定点数
    C语言||作业01
    C语言寒假大作战04
    C语言寒假大作战03
    C语言寒假大作战02
  • 原文地址:https://www.cnblogs.com/loaderman/p/10898289.html
Copyright © 2011-2022 走看看