0

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

    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>
4

3 回答 3

2

有几十种方法可以实现这一点。

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

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

于 2013-02-21T23:21:37.603 回答
0

我为你制作了一个 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'});
     }
}
于 2013-02-22T00:17:24.673 回答
0

如果您对 jquery 持开放态度并且您分配了与这两个 div 相同的 1 个类，您可以执行以下操作：这应该可以帮助您入门（请参阅此 jsfiddle）：我更改了 fiddle 以包含一个更简洁的解决方案，其中单击按钮添加和删除容器上的类，允许您在一次快速调用中设置多个属性，包括文本颜色。

<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;
}
于 2013-02-21T23:20:34.060 回答