访问 Ionic 2 DOM 元素的样式

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 使用选择器规则应用的那些。有关更多详细信息，请参阅此 MDN 文章。

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 路由。以下代码片段用于验证 ionic 是否应用了适当的类。

html- 首页.html

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

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