Truy cập Nét đặc trưng của Ionic 2 DOM Elements

Question

Tôi đang cố gắng để truy cập vào các yếu tố DOM của một trong các trang của tôi với những điều sau đây:

ionViewDidEnter() { 

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

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

Tuy nhiên, dường yếu tố này không có phong cách - Tôi đã cố gắng kết hợp khác nhau để truy cập nó nhưng không may mắn.

Cụ thể, tôi đang tìm chiều cao của thanh dẫn hướng ion. Điều này có thể không?

Answer 1

Bạn có thể nhận được chiều cao thực tế của một phần tử với element.offsetHeight.

Đối với thuộc tính kiểu, nó sẽ chỉ cung cấp cho bạn thuộc tính được xác định trong thuộc tính kiểu nội tuyến của phần tử (ví dụ: <div style="height: 20px;">...</div>), chứ không phải thuộc tính được áp dụng bởi CSS sử dụng quy tắc chọn. Xem this MDN article để biết thêm chi tiết.

Answer 2

Đây là giải pháp của tôi cho điều đó.

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

Answer 3

Tôi luôn thấy hữu ích khi sử dụng đơn giản ionic serve kiểm tra phần tử trong chrome và dễ dàng xem kiểu cho thiết bị đã cho.

Để truy cập phần tử DOM ở góc, tôi đã sử dụng đường #id. Đoạn mã sau được sử dụng để xác minh lớp thích hợp đã được áp dụng bởi ion.

HTML- home.html

<ion-spinner #testspinner name="crescent" paused="{{isPaused}}"></ion-spinner> 

home.ts 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); 
    } 

}