Entfernen Sie CSS mit JQuery aus einem Div

Ich bin neu bei JQuery. In meiner App habe ich folgendes:

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

Wenn ich auf ein Div klicke, ändert sich die Farbe dieses Div. Innerhalb dieser Klickfunktion habe ich einige Funktionen zu erledigen. Nach all dem möchte ich das angewendete CSS aus dem Div entfernen. Wie könnte ich das in JQuery machen?

Fügen Sie Ihre CSS-Eigenschaften in eine Klasse ein und gehen Sie dann folgendermaßen vor:

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

Dann, wo Ihre "anderen Funktionen" sind, tun Sie etwas wie:

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

Sie können bestimmte CSS, die sich auf dem Element befinden, wie folgt entfernen:

$(this).css({'background-color' : '', 'font-weight' : ''});

Obwohl ich Karim zustimme, dass Sie wahrscheinlich CSS-Klassen verwenden sollten.

Sie können die removeAttr-Methode verwenden, wenn Sie den gesamten Inline-Stil löschen möchten, den Sie manuell mit Javascript hinzugefügt haben. Es ist besser, CSS-Klassen zu verwenden, aber Sie wissen es nie.

$("#displayPanel div").removeAttr("style")

Sie können Inline-Eigenschaften folgendermaßen entfernen:

$(selector).css({'property':'', 'property':''});

Beispielsweise:

$(actpar).css({'top':'', 'opacity':''});

Dies ist im Wesentlichen oben erwähnt, und es macht definitiv den Trick.

Übrigens ist dies in Fällen nützlich, in denen Sie beispielsweise nach der Animation einen Status löschen müssen. Sicher könnte ich ein halbes Dutzend Klassen schreiben, um damit umzugehen, oder ich könnte meine Basisklasse verwenden und #id etwas rechnen und den Inline-Stil löschen, den die Animation anwendet.

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

jQuery.fn.extend
({
    removeCss: function(cssName) {
        return this.each(function() {
            var curDom = $(this);
            jQuery.grep(cssName.split(","),
                    function(cssToBeRemoved) {
                        curDom.css(cssToBeRemoved, '');
                    });
            return curDom;
        });
    }
});

/*example code: I prefer JQuery extend so I can use it anywhere I want to use.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //supports comma separated css names.

*/

ODER

//this parse style & remove style & rebuild style. I like the first one.. but anyway exploring..
jQuery.fn.extend
({
    removeCSS: function(cssName) {
        return this.each(function() {

            return $(this).attr('style',

            jQuery.grep($(this).attr('style').split(";"),
                    function(curCssName) {
                        if (curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

Abhängig von der Eigenschaft können Sie sie möglicherweise auf auto setzen.

Legen Sie den Standardwert fest, zum Beispiel:

$ (this) .css ("height", "auto");

oder im Fall anderer CSS-Funktionen

$ (this) .css ("Höhe", "erben");

Eigentlich ist dies der beste Weg, dies zu tun, wenn ich ein komplexes jquery-basiertes Styling durchführen muss, zum Beispiel, wenn Sie ein Modal haben, das Sie anzeigen müssen, aber Seitenversätze berechnen müssen, um die richtigen Parameter zu erhalten, die benötigt werden die Funktion a jQuery ("x"). css ({}).

Hier ist also die Einstellung der Stile, die Ausgabe von Variablen, die basierend auf verschiedenen Faktoren berechnet wurden.

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

Um diese Stile zu löschen. anstatt so etwas zu setzen

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

Der einfache Weg wäre

$(".modal").attr("style", "")

Wenn jquery Elemente auf dem Dom bearbeitet, werden die Stile in das Element im Attribut "style" geschrieben, als würden Sie die Stile inline schreiben. Alles, was Sie tun müssen, ist, dieses Attribut zu löschen, und das Element sollte auf seine ursprünglichen Stile zurückgesetzt werden

Hoffe das hilft

Ich habe das gleiche Problem auch, entfernen Sie einfach den Wert

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
      function(){$(this).css("background","");});
</script>

Wenn Sie keine Klassen verwenden möchten (was Sie wirklich sollten), können Sie nur das erreichen, was Sie möchten, indem Sie zuerst die sich ändernden Stile speichern:

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

Ich habe die zweite Lösung von user147767 verwendet

Hier gibt es jedoch einen Tippfehler. Es sollte sein

curCssName.toUpperCase (). indexOf (cssName.toUpperCase () + ':') <0

nicht <= 0

Ich habe diese Bedingung auch geändert für:

! curCssName.match (neues RegExp (cssName + "(-. +)?:"), "mi")

Manchmal fügen wir über jQuery eine CSS-Eigenschaft hinzu, die für verschiedene Browser auf unterschiedliche Weise hinzugefügt wird (dh die Eigenschaft border wird für Firefox als "border" und für IE als "border-top", "border-bottom" usw. hinzugefügt ).

Bevor Sie eine Klasse hinzufügen, sollten Sie überprüfen, ob bereits eine Klasse mit der Methode .hasClass () vorhanden ist

Für Ihre spezielle Frage. Sie sollten Ihre Sachen in Cascading Stylesheet legen. Es wird empfohlen, Design und Funktionalität zu trennen.

Daher ist die vorgeschlagene Lösung zum Hinzufügen und Entfernen von Klassennamen eine bewährte Methode.

Wenn Sie jedoch Elemente bearbeiten, können Sie nicht steuern, wie sie gerendert werden. removeAttr ('style') ist die BESTE Methode, um alle Inline-Stile zu entfernen.

Ich habe die Lösung von user147767 ein wenig geändert , um die Verwendung zu ermöglichen strings, arraysund objectsals Eingabe:

/*!
 * jquery.removecss.js v0.2 - https://stackoverflow.com/a/17196154/1250044
 * Remove multiple properties from an element in your DOM.
 *
 * @author Yannick Albert | #yckart
 * @param {Array|Object|String} css
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/06/19
 **/

$.fn.removeCss = function (css) {
    var properties = [];
    var is = $.type(css);

    if (is === 'array') properties = css;
    if (is === 'object') for (var rule in css) properties.push(rule);
    if (is === 'string') properties = css.replace(/,$/, '').split(',');

    return this.each(function () {
        var $this = $(this);
        $.map(properties, function (prop) {
            $this.css(prop, '');
        });
    });
};

// set some styling
$('body').css({
    color: 'white',
    border: '1px solid red',
    background: 'red'
});

// remove it again
$('body').removeCss('background');
$('body').removeCss(['border']);
$('body').removeCss({
    color: 'white'
});

http://jsfiddle.net/ARTsinn/88mJF/