0

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

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;
}

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

4

4 回答 4

2

You should use

var showPicture = document.getElementsByClassName("pictureBig")[0];
于 2013-06-05T12:12:22.013 回答
1

document.getElementsByClassName is not supported in all Browsers. You should instead use document.querySelector or document.querySelectorAll which works in almost all Browsers including IE8+.

于 2013-06-05T12:14:01.720 回答
0

You could try this:

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

}

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

}
于 2013-06-05T12:16:37.600 回答
0

尝试在 img 标签中添加样式属性，如下所示

    <img src="bilder/miniboardm.jpg" alt="minicruiser" 
id="boardsprice" style="visibility:hidden"/>
于 2013-06-05T12:43:28.483 回答