प्रवेश शैली तत्वों

Question

मैं निम्नलिखित के साथ अपने किसी एक पृष्ठ से डोम तत्वों का उपयोग करने की कोशिश कर रहा हूँ:

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 के साथ तत्व की वास्तविक ऊंचाई प्राप्त कर सकते हैं।

शैली की संपत्ति के लिए, यह आपको केवल तत्व की इनलाइन शैली विशेषता (उदा। <div style="height: 20px;">...</div>) में परिभाषित गुण प्रदान करेगा, न कि चयनकर्ता नियमों का उपयोग कर सीएसएस द्वारा लागू किए गए। अधिक जानकारी के लिए 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 क्रोम में तत्व का निरीक्षण करने और दिए गए डिवाइस के लिए शैली को आसानी से देखने के लिए बहुत उपयोगी लगता है।

कोणीय में डीओएम तत्व तक पहुंचने के लिए मैंने #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); 
    } 

}