Question

我正在尝试根据某些条件设置图像的样式，并尝试在页面打开/加载时显示它们。

design_on_const(){
    var cover1 = document.getElementById("cover1");
    var cover2 = document.getElementById("cover2");
    var cover3 = document.getElementById("cover3");
    var cover4 = document.getElementById("cover4");
    var cover5 = document.getElementById("cover5");
    cover3.style['visibility']="hidden";
    cover4.style['visibility']="hidden";
    cover5.style['visibility']="hidden";
    if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '132') {
        this.cover_1_prop.top = "0px";
        this.cover_1_prop.left = "14%";
           this.cover_1_prop.maxHeight = "98%"; 

  this.cover_2_prop.style['top'] = "0px";
  this.cover_2_prop.style['left'] = "51%";
  this.cover_2_prop.style['maxHeight'] = "98%";
    }
    if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '220') {
        cover1.style['top'] = "0px";
        cover1.style['left'] = "10%";
        cover1.style['maxHeight'] = "97%";

        cover2.style['left'] = "52%";
        cover2.style['maxHeight'] = "91%";
        cover2.style['top'] = "6px";
    }
    if (localStorage.getItem('gardirop_model') == 'menteseli' && localStorage.getItem('gardirop_size') == '132') {
        cover1.style['top'] = "-1%";
        cover1.style['left'] = "13%";
        cover1.style['maxHeight'] = "100%";

        cover2.style['top'] = "-1%";
        cover2.style['left'] = "50%";
        cover2.style['maxHeight'] = "100%";
    }
    //menteseli 220cm
    if (localStorage.getItem('gardirop_model') == 'menteseli' && localStorage.getItem('gardirop_size') == '220') {

        cover1.style['top'] = "0px";
        cover1.style['left'] = "8%";
        cover1.style['width'] = "20%";
        cover1.style['maxHeight'] = "98%";

        cover2.style['top'] = "-1%";
        cover2.style['left'] = "24%";
        cover2.style['maxHeight'] = "99%";
        cover2.style['width'] = "20%";

        cover3.style['visibility'] = "visible";
        cover4.style['visibility'] = "visible";
        cover5.style['visibility'] = "visible";
    }
    console.log("done!");
}

这是我的函数，它为元素设置值，我在构造函数，ionViewDidLoad，ngOnInit，ionViewDidEnter和其他生命周期事件中调用此函数，如this.design_on_const();。它确实有效，写作完成＆＃34;控制台，但是，我的样式没有显示。本地存储值已在前几页中设置，因此，根据这些值，我必须在页面加载时在此页面中显示我的图像。但是，图像看起来并不像我想要的那样。它们只是随机显示在页面上，就像它们采用默认值一样。我怎样才能以最佳方式设置它们的样式，或者我应该在哪里调用我的功能？

这些是我在html中的图片：

<ion-col width-25>
    <div style="position: relative;display: inline-block;">
        <img class="gardirop" src="{{gardirop}}" style="width: 90%;" />

        <img id="cover1" class="cover_1" src="{{gardirop_cover_1}}" />
        <img id="cover2" class="cover_2" src="{{gardirop_cover_2}}" />

        <img id="cover3" class="cover_3" src="{{gardirop_cover_3}}" />
        <img id="cover4" class="cover_4" src="{{gardirop_cover_4}}" />
        <img id="cover5" class="cover_5" src="{{gardirop_cover_5}}" />
    </div>
</ion-col>

我的.scss文件：

.gardirop {
    z-index: 1;
    position: relative;

}
.cover_1 {
    z-index: 10;
    position: absolute;
}
.cover_2 {
    z-index: 20;
    position: absolute;
    display: inline-block;
}
.cover_3 {
    z-index: 20;
    position: absolute;
    top:-4px;
    left:41%;
    max-height: 99%;
    display: inline-block;
    width: 20%;
}
.cover_4 {
    z-index: 20;
    position: absolute;
    top:6px;
    left:60%;
    max-height: 90%;
    display: inline-block;

}
.cover_5 {
    z-index: 20;
    position: absolute;
    top:7px;
    left:74%;
    max-height: 89%;
    display: inline-block;
    width: 16%;
}

编辑：变量定义

        export class KararPage {
    //here
    cover_1_prop:any={};
    cover_2_prop:any={};
    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.design_on_const();
    } 
    design_on_const(){
      ...............}
       }

Answer 1

使用document.getElementById访问元素并直接更改DOM不适用于您想要的Angular 2 / Ionic 2。对于你的情况，我认为ngStyle很容易。创建包含样式属性的对象：

    cover_1_prop:any={};//class variable

 //in your function
this.cover_1_prop.visibility='hidden';
        if (localStorage.getItem('gardirop_model') == 'surgulu' && localStorage.getItem('gardirop_size') == '132') {
        this.cover_1_prop.top = "0px";
        this.cover_1_prop.left = "14%";
        this.cover_1_prop.maxHeight = "98%";
        }

在html中，

<img id="cover1" class="cover_1" [ngStyle]="cover_1_prop" src="{{gardirop_cover_1}}" />

如果要设置css类或从组件更新它，可以使用ngClass。

Sample Plunker

页面加载离子2

1 个答案: