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的选择器，或者您选择的任何其他选择器。

Answer 2

如果您对jquery开放，并且您为这两个div分配了1个共同类，则可以执行以下操作：这应该让你开始（参见this jsfiddle）：我改变了小提琴，包括一个更简洁的解决方案，点击按钮添加和删除容器上的类，允许你在一个快速调用中设置多个属性，包括文本颜色

<div class='container'>
</div>
<div class='container'>
</div>
<button id="changeColor" type="button">Change Color </button>


<script type="text/javascript">
$(document).ready( function() {
    $('#changeColor').click( function() {
        if ($('.container').hasClass("blackContainer")){
            $('.container').addClass("whiteContainer");
            $('.container').removeClass("blackContainer");
        } else {
            $('.container').removeClass("whiteContainer");
            $('.container').addClass("blackContainer");
        }

    });
});
</script>

//CSS
.blackContainer {
    background-color: black;
    color: white;
}

.whiteContainer {
    background-color: white;
    color: black;
}

Answer 3

我为你提供了一个jsfiddle来玩jsfiddle

我也以与OP类似的方式做了javascript / jQuery，因为它通常有助于他们理解。

如上所述，有几种不同的方法可以做到这一点，我只做了一次。

document.ready函数为要单击的对象设置事件侦听器，大多数情况下，这是您将看到事件编码的方式。因此，当单击链接时，它会使用侦听器所针对的对象的字符串名称来调用该函数。

$(document).ready(function() {
    $("#changeit").click(function(){
       changeblackandwhite("Maincontainer");  
    })
});

分配事件侦听器后，单击链接时将调用下面的函数。

// Here's your function, put the current color in a var, check if it's black
// if black, change colors, else make it black.
function changeblackandwhite(objDivID) {
     var curColor = $("#" + objDivID).css("color");
     if( curColor == 'rgb(0, 0, 0)'){ 
         $("#"+objDivID).css({'color':'white','background-color':'black'});
     } else {
         $("#"+objDivID).css({'color':'black','background-color':'ghostwhite'});
     }
}

如何让javascript函数调用两个div

3 个答案: