我正在尝试使用以下内容访问其中一个页面的DOM元素:
ionViewDidEnter() {
this.platform.ready().then(() => {
let elm = <HTMLElement>document.querySelector("ion-navbar.toolbar.toolbar-ios.statusbar-padding");
console.log(elm.style);
})
}
然而,看起来这个元素没有风格 - 我尝试了各种组合来访问它但没有运气。
具体来说,我正在寻找离子导航栏的高度。这可能吗?
答案 0 :(得分:8)
您可以使用element.offsetHeight
获取元素的实际高度。
对于style属性,它只会为您提供元素的内联样式属性(例如<div style="height: 20px;">...</div>
)中定义的属性,而不是CSS使用选择器规则应用的属性。有关详细信息,请参阅this MDN article。
答案 1 :(得分:1)
这是我的解决方法。
let tabs = document.querySelectorAll('.show-tabbar');
if (tabs !== null) {
Object.keys(tabs).map((key) => {
tabs[key].style.transform = 'translateY(56px)';
});
}
答案 2 :(得分:1)
我总是觉得简单地使用它非常有用
ionic serve
检查chrome中的元素并轻松查看给定设备的样式。
要以角度访问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);
}
}