Sencha: Applying styles with DomHelper & DomQuery

I'm trying to do some simple style application with Sencha Touch. Specifically, I would think that this would make the image with id = "piece-5" opaque:

Ext.DomHelper.applyStyles(Ext.DomQuery.selectNode('img#piece-5'), 'opacity: 1');

But it doesn't. DomQuery seems to be passing in an object that is not connected to the actual DOM element.

What am I doing wrong here?

UPDATE

First off, I understand how CSS opacity works. And yes, the img is transparent, and I'm trying to make it opaque, as I stated in the question. [This was in response to an answer that has since been deleted.]

I'm only a few weeks into Sencha, so I thought I was misunderstanding how Ext.DomQuery works, but apparently the problem is somewhere else in my code, so here are some more details.

I have a panel with some images in <li> elements. The <li>s have background images set on them, so making the contained img transparent (opacity: 0) reveals the background image. This is working fine. Now I'm trying to 'hide' the background image by setting the opacity of the img element back to 1.

The panel has this listener:

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

Which calls this function:

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 = [];
    }
}

At this point, the idea is just to allow the user to tap one image to 'reveal' what is under it, and then when they tap another image it briefly hides the second one and then shows both again.

After clicking 2 items, I see this in the console:

["piece-6", "piece-5"]
<img 开发者_Go百科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">​

But the images remain transparent, and I if I view them in the DOM, I see:

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

I hope this clarifies the question.