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 を使用して 1 行で実行できます。

jQuery を使用すると、問題の要素が class 属性を持つように宣言できます。

jQuery を使用すると、次のようなことができます。

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

jQuery への引数は、クラス ベースのセレクター、ID ベースのセレクター、または選択したその他のセレクターにすることができます。

于 2013-02-21T23:21:37.603 に答える
0

私はあなたがjsfiddleで遊ぶためにjsfiddleを作りました

また、通常は理解に役立つため、OPと同様の方法でjavascript/jQueryを実行しました。

上記のように、これを行うにはいくつかの方法がありますが、私が行ったのは 1 つだけです。

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 にオープンで、これら 2 つの div に共通の 1 つのクラスを割り当てる場合、次のことができます:コンテナーのクラスを削除して、テキストの色を含む複数の属性を 1 回のクイック呼び出しで設定できるようにします。

<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 に答える