Button-Hintergrundfarbe wechseln

Ich habe versucht, das Umschalten der hintergrund-Farbe Eigenschaft einer Schaltfläche onclick-aber die Farbe änderungen nur einmal und nicht hin und her wechseln. Unten ist der code.

function btnColor(btn, color) {
var property = document.getElementById(btn);
    if (property.style.backgroundColor == "rgb(244,113,33)") {
        property.style.backgroundColor=color;
    }
    else {
        property.style.backgroundColor = "rgb(244,113,33)";
    }
}

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','rgb(255,242,0)');" />
Console.melden Sie property.style.backgroundColor kurz vor if Sie werden sehen, was der Wert eigentlich ist.

InformationsquelleAutor ayush | 2013-06-11

  1. 4

    Des Problems, das Sie haben ist, dass die background-color eines Elements gemeldet wird, anders als im Browser, entweder in rgb, rgba (mit oder ohne Leerzeichen) in hex-oder im HSL...

    Also der button wird wahrscheinlich nie erfüllen if Zustand, was bedeutet, es wird immer gehen Sie auf die else.

    In diesem Sinne, ich würde vorschlagen, mit einem class-name zu verfolgen, die un - /ausgeschaltet Zustand:

    function btnColor(btn, color) {
var property = document.getElementById(btn);
    if (property.className !== 'toggled') {
        property.style.backgroundColor=color;
        property.className = 'toggled'
    }
    else {
        property.style.backgroundColor = "rgb(244,113,33)";
        property.className = '';
    }
}

    JS Fiddle demo.

    Natürlich, wenn wir über die class des Elements, wir könnten das auch mit CSS Stil das element:

    function btnColor(btn) {
var property = document.getElementById(btn);
    if (property.className !== 'toggled') {
        property.className = 'toggled'
    }
    else {
        property.className = '';
    }
}

    Mit CSS:

    #btnHousing {
    background-color: rgb(255,242,0);
}

#btnHousing.toggled {
    background-color: rgb(244,113,33);
}

    JS Fiddle demo.

    Vorherigen JavaScript vereinfacht werden könnte (mit den gleichen CSS):

    function btnColor(btn) {
    var property = document.getElementById(btn);
    property.className = 'toggled' == property.className ? '' : 'toggled';
}

    JS Fiddle demo.

    Was schlagen Sie vor, den ich verwenden?
    Gerade gesehen, dass.. vielen Dank!
    Überhaupt kein problem! =)

    InformationsquelleAutor David Thomas

  2. 1
    if(document.getElementById(id).style.background !== 'rgb(0, 0, 0)')
    dies versucht.. funktioniert nicht!
    Warum, unter welcher situation, würde die backgroundColor des Elements schwarz sein?

    InformationsquelleAutor Jayram Singh

Schreibe einen Kommentar