改变 div 标签内 img 元素的样式

Question

例子：

<div class="test"><img src="test.jpg" style="display:none;" /></div>

如何使用JavaScript更改此内容，我知道在CSS中它是这样的：

.test img {display:block;}

但是在JavaScript中，我只知道这个：

document.getElementById("test").style.display="block";

那显然是整个div标签，不是图片。

- N_F_S

---

你的元素有一个类，而不是一个ID... - Alnitak

Answer 1

如果您正在使用一个ID为"test"，您可以这样做。

document.getElementById("test")
        .getElementsByTagName("img")[0].style.display="block";

这段代码使用了 getElementsByTagName 方法，该方法返回一个图片集合。通过 [0] 取得索引为 0 的图片（第一张图片），然后应用样式。

如果你有一个名为 "test" 的类，你可以这样做，但在 IE7 及以下版本中不起作用：

var imgs = document.querySelectorAll(".test > img");

for( var i = 0; i < imgs.length; i++ ) {
    imgs[i].style.display="block";
}

为了使你的网站兼容性更好，你可以这样做：

function getElementsByClassName( root, clss ) {
    var elems = document.getElementsByTagName('*'),
        result;
    clss = " " + clss + " ";
    for( var i = 0; i < elems.length; i++ ) {
        if( (" " + elems[ i ].className + " ").indexOf( clss ) > -1 ) {
            result.push( elems[i] );
        }
    }
    return result;
}

var tests = getElementsByClassName( document, "test" );

for( var i = 0; i < tests.length; i++ ) {
    var img = tests[i].getElementsByTagName('img')[0];
    if( img ) {
         img.style.display="block";
    }
}

- RightSaidFred

---

在jQuery中，只需键入$('.test img').css('display', 'block')即可；-) - Alnitak

@N_F_S 是的，没有 jQuery，DOM 的操作似乎变得很困难 :( - Alnitak

@N_F_S：我更新了使用querySelectorAll，它在IE8及以上版本中得到支持。 - RightSaidFred

@N_F_S 你需要在 getElementsByClassName() 的结果上加上 [0] 后缀，并且在它实际不存在的情况下进行错误检查！ - Alnitak

RightSaidFred，这是针对在 div 中找到的所有图像，对吗？但如果只有一张图片，那么代码会是相同的吗？ - N_F_S