javascript - 可见性隐藏，javascript？

Question

有人可以告诉我为什么我的代码无法正常工作，似乎无法弄清楚为什么，这是一件非常简单的事情，所以我不明白为什么我找不到问题...

var pictures = document.getElementById('contents').getElementsByClassName('pictureSmall');
    for(k=0; k<pictures.length; k++){ 
        pictures[k].onclick = showPic;
        pictures[k].onblur = hidePic;
    }

function showPic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'visible';

}

function hidePic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'hidden';

}

这是 html:

    <div id="contents">
            <div class="pictureBig"><img src="bilder/boards.jpg" alt="cruisers"/></div>
        <div id="main" class="content">

            <img src="bilder/miniboardm.jpg" alt="minicruiser" id="boardsprice"/>
            <img src="bilder/miniboard2m.jpg" alt="minicruiser" id="boardgreen"/>
            <img class="pictureSmall" src="bilder/boardssmall.jpg" alt="minicruisers" id="boardsmall"/>
            <img class="pictureSmall" src="bilder/boardbluesmall.jpg" alt="shirt" id="small"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img class="pictureSmall" src="bilder/postersmall.jpg" alt="minicruiser" id="small2"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img src="bilder/boardcarving.jpg" alt="print" id="boardprint"/>
            <p></p>
        </div>
</div>

这是CSS:

.pictureBig {
    position:absolute; 
    display:none; 
    background-color:#EEE; 
    border:2px ridge #333; 
    padding:6px; 
    left:10px; 
    z-index:2; 
    margin-left:350px;
}

当我尝试显示大图时收到的消息是“无法读取未定义的属性‘样式’”。

Answer 1

你应该使用

var showPicture = document.getElementsByClassName("pictureBig")[0];