Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing Style of Ionic 2 DOM Elements

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?

like image 766
Jack Nutkins Avatar asked Oct 13 '17 00:10

Jack Nutkins


People also ask

What is the best way to locate an element in the DOM?

The easiest way to find an HTML element in the DOM, is by using the element id.

What is the type of a DOM element?

The Element type represents an XML or HTML element, providing access to information such as its tag name, children, and attributes. the element's tag name. may be a Document or Element.

What can a DOM element contain?

Document object model. The DOM is the way Javascript sees its containing pages' data. It is an object that includes how the HTML/XHTML/XML is formatted, as well as the browser state. A DOM element is something like a DIV, HTML, BODY element on a page.


2 Answers

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.

like image 175
ConnorsFan Avatar answered Sep 28 '22 00:09

ConnorsFan


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)';
          });
  }
like image 33
ravi Avatar answered Sep 28 '22 01:09

ravi