javascript - 如何使javascript函数调用两个div

我试图单击按钮时进行颜色更改，但我设法做到了这一点，但是我不仅要更改主要内容容器的颜色，还要更改更多容器的颜色，我该怎么做？

    function changeblackandwhite(objDivID) {
  if(document.getElementById(objDivID).style.color=='black'){
    document.getElementById(objDivID).style.color='white';
    document.getElementById(objDivID).style.backgroundColor='black';
  }

  else if(document.getElementById(objDivID).style.color=='white'){
    document.getElementById(objDivID).style.color='black';
    document.getElementById(objDivID).style.backgroundColor = 'white';
  }

  else{
    document.getElementById(objDivID).style.color='black';
    document.getElementById(objDivID).style.backgroundColor='white';
  }
}

<a href="javascript:changeblackandwhite('Maincontainer')"><img src="images/colour.jpg" title="Change Text/Backgroud Colors"></a>

最佳答案

您可以通过多种方式来完成此任务。

您可以将函数的参数更改为字符串数组。您还可以降低功能的复杂性

<script type="text/javascript">
changeblackandwhite = function() {
  for( var idx=0; idx < arguments.length; idx++) {
    var tgtDiv= document.getElementById(arguments[i]);
    if(tgtDiv.style.color=='black'){
        tgtDiv.style.color='white';
        tgtDiv.style.backgroundColor='black';
    }
    else{
        tgtDiv.style.color='black';
        tgtDiv.style.backgroundColor='white';
    }
  }
};
</script>

<a href="javascript:changeblackandwhite('Maincontainer', 'Container2')"><img src="images/colour.jpg" title="Change Text/Backgroud Colors"></a>

正如另一个读者所质疑的那样-您可以在一行中使用jQuery完成此操作。

使用jQuery，您可以声明所涉及的元素具有class属性。

使用jQuery，您可以执行以下操作：

$('div.someClass').css({'color': 'black', 'background-color': 'white'});

jQuery的参数可以是基于类的选择器，基于id的选择器或您选择的任何其他选择器。