Javascript Sencha：使用DomHelper&；应用样式；多姆奎

我试图用SenchaTouch做一些简单的风格应用。具体来说，我认为这会使id=“piece-5”的图像不透明：

但事实并非如此。DomQuery似乎正在传入一个未连接到实际DOM元素的对象

我做错了什么

更新

首先，我了解CSS不透明度是如何工作的。是的，img是透明的，我正试图让它不透明，正如我在问题中所说的。[这是对后来被删除的答复的答复。]

我刚刚进入Sencha几个星期，所以我认为我误解了Ext.DomQuery的工作原理，但显然问题出在我的代码中的其他地方，所以这里有一些更详细的信息

我有一个面板，其中包含

元素中的一些图像。

设置了背景图像，因此使包含的img透明（

不透明度：0

）会显示背景图像。这很好用。现在我试图通过将img元素的不透明度设置回1来“隐藏”背景图像

面板具有以下侦听器：

listeners: {
    el: {
        tap: this.imgFlip,
        delegate: 'img'
    }
}

它调用此函数：

imgFlip: function (item) {
    if(typeof this.flipped == 'undefined'){
        this.flipped = new Array();
    }

    Ext.DomHelper.applyStyles(item.target, 'opacity: 0');

    this.flipped.push(item.target.id);

    if(this.flipped.length > 1){
        console.log(this.flipped);
        for(var i=0; i<this.flipped.length; i++){
            var el = Ext.DomQuery.selectNode('img#' + this.flipped[i]);
            Ext.DomHelper.applyStyles(el, 'opacity: 1');
            console.log(el);
        }
        this.flipped = [];
    }
}

imgFlip:功能（项）{
if（typeof this.flipped==“未定义”）{
this.flipped=新数组（）；
}
applyStyles（item.target，'opacity:0'）；
this.fliped.push（item.target.id）；
如果（this.flipped.length>1）{
console.log（this.fliped）；
for（var i=0；iI）通过将侦听器返回的整个对象推入数组，并将所有样式更改应用于该对象，解决了这个问题。但是我仍然想知道为什么
Ext.DomHelper.applyStyles
在这种情况下不起作用。
imgFlip: function (item) {
    if(typeof this.flipped == 'undefined'){
        this.flipped = new Array();
    }

    Ext.DomHelper.applyStyles(item.target, 'opacity: 0');

    this.flipped.push(item.target.id);

    if(this.flipped.length > 1){
        console.log(this.flipped);
        for(var i=0; i<this.flipped.length; i++){
            var el = Ext.DomQuery.selectNode('img#' + this.flipped[i]);
            Ext.DomHelper.applyStyles(el, 'opacity: 1');
            console.log(el);
        }
        this.flipped = [];
    }
}

["piece-6", "piece-5"]
<img src=​"img/​jadelogo.jpg" style=​"width:​ 80px;​ opacity:​ 1;​ " id=​"piece-6" class=​"artifact-2">​
<img src=​"img/​jadelogo.jpg" style=​"width:​ 80px;​ opacity:​ 1;​ " id=​"piece-5" class=​"artifact-1">​

<img src="img/jadelogo.jpg" style="width: 80px; opacity: 0; " id="piece-6" class="artifact-2">