Question

我正在尝试使用以下内容访问其中一个页面的DOM元素：

 ionViewDidEnter() {

    this.platform.ready().then(() => {

      let elm = <HTMLElement>document.querySelector("ion-navbar.toolbar.toolbar-ios.statusbar-padding");
      console.log(elm.style);
    })
 }

然而，看起来这个元素没有风格 - 我尝试了各种组合来访问它但没有运气。

具体来说，我正在寻找离子导航栏的高度。这可能吗？

Answer 1

您可以使用element.offsetHeight获取元素的实际高度。

对于style属性，它只会为您提供元素的内联样式属性（例如<div style="height: 20px;">...</div>）中定义的属性，而不是CSS使用选择器规则应用的属性。有关详细信息，请参阅this MDN article。

Answer 2

这是我的解决方法。

let tabs = document.querySelectorAll('.show-tabbar');
      if (tabs !== null) {
          Object.keys(tabs).map((key) => {
              tabs[key].style.transform = 'translateY(56px)';
          });
  }

Answer 3

我总是觉得简单地使用它非常有用 ionic serve 检查chrome中的元素并轻松查看给定设备的样式。

要以角度访问DOM元素，我使用了#id路由。以下片段用于验证离子是否适用了适当的类。

html- home.html

<ion-spinner #testspinner name="crescent" paused="{{isPaused}}"></ion-spinner>

ts- home.ts

import {Component} from '@angular/core';
import {ViewChild} from '@angular/core';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  isPaused: boolean;
  @ViewChild('testspinner') testspinner;

  constructor() {
    this.isPaused = false; // set to true will cause to never have animation state running.
  }


  containsPausedClass(list: string[]) {
    return (list.indexOf('spinner-paused') != -1);
  }

  ngAfterViewInit() {
    // if the spinner is allows to load without 'spinner-paused' then safari will work.
    setTimeout(() => {
      this.isPaused = true;
    }, 0);
    console.log('test spinner is paused ',
      this.containsPausedClass(this.testspinner._elementRef.nativeElement.classList.value));

  }

  togglePause() {
    this.isPaused = !this.isPaused;

    setTimeout(() => {

      console.log('test spinner is paused ',
        this.containsPausedClass(this.testspinner._elementRef.nativeElement.classList.value));
    }, 100);
  }

}

访问Ionic 2 DOM元素的样式

3 个答案: