Javascript:更改div内所有图像的背景

Question

我想用 JS 函数更改 div 中所有图像的背景:

我的分区:

<div>
    <div id="avatar_container">
        <img src="a.png" onclick="myfunction()"  />
        <img src="b.png" onclick="myfunction()"  />
    </div>
</div>  

我的功能:

function myfunction(){
    //I tried this two methods
    document.getElementById("avatar_container").getElementsByTagName('img').css({'background' : 'green'}); 
    document.getElementById("avatar_container").getElementsByTagName('img').style.backgroundColor = "green";        
}

Answer 1

解决你的问题

<div id="avatar_container">
    <img src="a.png"  class="myClass1"  />
     <img src="b.png"  class="myClass1"  />
</div>

Js:(重要提示:html代码后使用js代码)

  var elems = document.getElementsByClassName('myClass1'), i;
    for (i in elems) {
            elems[i].style.backgroundColor = "green";  
        }
    }

但我建议你使用和学习 Jquery，

jquery 是一个 Javascript 框架，它可以让你用更少的代码让一切变得非常简单

用Jquery你可以像这样做最简单的

$('#avatar_container .myClass1').css('backgroundcolor','green');

如果你想附加点击事件

 $('#avatar_container .myClass1').click(function() {
   $(this).css('backgroundcolor','green');
});