Access the DOM Ionic 2 Element Style

Question

I am trying to access DOM elements on one of my pages with the following:

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

However, this element does not seem to have a style - I tried various combinations to access it, but no luck.

In particular, I am looking for the height of the ion navigator. Is it possible?

Answer 1

You can get the actual height of an element using element.offsetHeight .

As for the style property, it will only give you the attributes defined in the style inline style attribute (for example, <div style="height: 20px;">...</div> ), and not those that are applied by CSS using rules of choice. See this MDN article for more details.

Answer 2

This is my solution for this.

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

Answer 3

It has always been very useful for me to just use ionic serve inspect the element in chrome and easily see the style for this device.

To access the DOM element in angular, I used the #id route. The following fragment was used to verify that the corresponding class was applied ionic.

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