更改 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 标签，而不是 img。

Answer 1

如果您使用的是 ID "test"，则可以执行此操作。

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

这使用getElementsByTagName返回找到的图像的集合。该[0]抓住在索引图像0（第一图像），然后应用的样式。

如果你有一个 class "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";
    }
}