Accessing Style of Ionic 2 DOM Elements

Question

I'm trying to access the DOM elements of 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, it appears this element has no style - I have tried various combinations to access it but no luck.

Specifically, I'm looking for the height of the ion-navbar. Is this possible?

Answer 1

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

As for the style property, it will give you only the attributes defined in the element's inline style attribute (e.g. <div style="height: 20px;">...</div>), not the ones applied by the CSS using selector rules. See this MDN article for more details.

Answer 2

This is my workaround for that.

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