Wie kann ich Umschalten zwischen jede css-Eigenschaft klicken Sie mit javascript oder jquery?

ich bin sehr neu in javascript, aber ich brauche etwas, wie angenommen, ich habe einen weißen hintergrund, wenn ich es auf einmal dann seinen hintergrund ändern sollte schwarz und wenn ich auf wieder auf seine hintergrund sollte sich ändern in weiß wieder. heißt, ich brauche zu ändern hintergrund der gleichen Schaltfläche, die auf klicken auf die gleiche Schaltfläche, bitte helfen Sie mir, ich bin wirklich sehr puzzle-und ich bin auch in der Phase des Lernens von javascript, so dass, wenn Sie können mir sagen, etwas mehr über javascript oder eine andere Idee außer dem, was ich brauche, wäre ich Euch dankbar, vielen Dank.

Ich verstehe, Sie sind mit JavaScript, aber was haben Sie versucht?

InformationsquelleAutor user2827600 | 2013-09-30

  1. 3

    Können Sie versuchen, so etwas wie dieses

    HTML:

    <button class="btn">Toggle Background</button>

    CSS:

    .btn{
    background:#fff;
}

.btn_red{
    background:red;
}

    JS:

    $(function(){
    $('.btn').on('click', function(){
        $(this).toggleClass('btn_red')
   });
});

    DEMO.

    Vanille JavaScript :

    window.onload = function(){
    document.querySelector('.btn').onclick = function(){
        if(this.className.match('btn_red')) {
            this.className = 'btn';
        }
        else {
            this.className = 'btn btn_red';
        }
    };
};

    DEMO.
    Gibt es andere Möglichkeiten, aber dies sind nur einige Ideen.

    InformationsquelleAutor The Alpha

  2. 1

    Eine jQuery Lösung wäre

    http://jsfiddle.net/zMrtL/ (Ich habe die text Farbe auf rot, so dass auf Umschalten, es wird nicht am Ende mit text schwarz auf schwarz, also unsichtbar.)

    CSS

    #div { /* use any selector that matches your desired element */
    background-color: #FFF;
}

#div.dark { /* the "dark" class to be added by jQuery, 
               put your above selector in front to increase specificity */
    background-color: #000;
}

    Über die "Spezifität" Frage, wenn Sie nicht hinzufügen #div vor dark, die #div definition überschreibt die .dark definition und das div bleibt weiß, ist es sogar Hinzugefügt von jQuery. Blick auf diese oder diese wenn Sie mehr wissen wollen.

    JavaScript/Jquery

    //ensure HTML is ready/completely loaded, so that you won't end up 
//binding click to something non-existent (at the time the binding occurs)
//Trying to bind something non-existent will not work because jQuery can never know
//if there is such element in the future, unless you use delegates (far fetched)
$(function(){ 
    //on click, bind the "click" event to your element, and do something
    $('#div').click(function(){
        $(this).toggleClass('dark'); //on click, toggle the class of the element clicked
        //i.e. if the class does not exist, add it, otherwise remove it.
        //in jQuery, "this" is the element clicked/mouse-overed/etc.. i.e. target of the event
        //in functions passed to jQuery event-binding functions.
        //CSS/browsers is smart enough to detect these class changes and apply styles to new elements.
    });
});

    #div bedeutet, dass ein element mit der id div d.h. <div id="div"></div> als # bedeutet, dass ein element, für das die folgende ID an. Wenn Sie Klasse statt, d.h. <div class="div"></div> verwenden .div

    Dokumentationen für auf, toggleClass, und übergeben Sie eine Funktion, um jQuery-Konstruktor

    InformationsquelleAutor luiges90

Schreibe einen Kommentar