5

background-colorJavaScript を使用してボタンのプロパティを変更しようとしています。スクリプトは、現在のbackground-color設定を確認してから切り替えます。これは JavaScript コードです。

function btnColor(btn,color) {
    var property=document.getElementById(btn);
    if (property.style.background-color == "#f47121") {
        property.style.background-color=Color;
    }
    else {
        property.style.background-color = "#f47121";
    }
}

これは私がhtmlで渡すものです：

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','#fff200');" />

toggleLayer私が使用している別の機能であり、完全に正常に機能します。なぜそれが機能しないのか理解できないようです。

4

4 に答える 4

4

なぜjQueryを使わないのですか？

コア Javascript はとても生です! 背景色を変更するだけの場合は、jQuery で on click イベントを使用します。

$('#btnHousing').click(function() {
    //Now just reference this button and change CSS
    $(this).css('background-color','#f47121');
});

個人的には、生のJavaScriptよりもはるかに読みやすいです。

よろしく

于 2013-06-06T15:32:32.283 に答える
3

私は JsBin で実際の例を作成しました: LINK HERE

  • 関数の名前を setColor に変更しました
  • プロパティ property.style.background-color を window.getComputedStyle(property).backgroundColor で変更しました
于 2013-06-06T15:31:59.040 に答える
2

JavaScript でこの関数を試してください:

function setColor(btn,color){
    var property=document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

onclick 属性で入力の ID を繰り返さないようにするには、次のようにします。

HTML :

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor(this, '#fff200');" />

JavaScript (変数名は大文字と小文字が区別されることに注意してください。Color => color を参照してください):

function setColor(btn, color){
    if (btn.style.backgroundColor == "#f47121") {
        btn.style.backgroundColor = color;
    } else {
        btn.style.backgroundColor = "#f47121";
    }
}
于 2013-06-06T15:54:18.273 に答える
1

コードをこれに変更します...

function btnColor(btn, color) {
    var property = document.getElementById(btn);
    if (property.style.backgroundColor == "#f47121") {
        property.style.backgroundColor = Color;
    } else {
        property.style.backgroundColor = "#f47121";
    }
}

ハイフンでつながれた css 属性は、JS ではキャメルケースです。たとえば、次のようbackground-colorになります ->backgroundColor

上記のコードは機能するはずです。

于 2013-06-06T15:34:50.933 に答える