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";
    
      }
    
    }

    效果:

  • 相关阅读:
    SpringCloudStream实例
    Gateway环境搭建,通过YML文件配置
    Hystrix图形化监控
    Hystrix服务降级
    SpringBootのRedis
    springboot之缓存
    springboot整合JPA
    留言板
    Python 京东口罩监控+抢购
    2019年 自我总结
  • 原文地址:https://www.cnblogs.com/loaderman/p/10898289.html
Copyright © 2011-2022 走看看