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

如果您使用的是身份证"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";
    }
}

在div标签内更改img的样式

1 个答案: