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

Question

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

    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>

Answer 1

有多种方法可以实现这一目标。

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

<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，您可以声明相关元素具有类属性。

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

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

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