訪問樣式元素

Question

我想用下面來訪問我的網頁之一的DOM元素：

ionViewDidEnter() { 

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

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

但是，看來這元素沒有風格 - 我已經嘗試了各種組合訪問它，但沒有運氣。

具體來說，我正在尋找ion-navbar的高度。這可能嗎？

Answer 1

您可以使用element.offsetHeight獲取元素的實際高度。

至於樣式屬性，它將只給出元素的內聯樣式屬性（例如<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 檢查鉻中的元素，並很容易看到給定設備的樣式。

要訪問角度中的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); 
    } 

}