Rimuovi CSS da un Div usando JQuery

Sono nuovo di JQuery. Nella mia app ho il seguente:

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

Quando faccio clic su un Div, il colore di quel Div viene cambiato. All'interno di quella funzione Click ho alcune funzionalità da fare. Dopo tutto quello che voglio rimuovere il Css applicato dal Div. Come potrei farlo in JQuery?

Inserisci le tue proprietà CSS in una classe, quindi fai qualcosa del genere:

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

Quindi dove sono le tue "altre funzionalità" fai qualcosa del tipo:

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

Puoi rimuovere css specifici che si trovano sull'elemento in questo modo:

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

Anche se sono d'accordo con Karim che probabilmente dovresti usare le classi CSS.

È possibile utilizzare il metodo removeAttr, se si desidera eliminare tutto lo stile in linea aggiunto manualmente con javascript. È meglio usare le classi CSS ma non lo sai mai.

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

Puoi rimuovere le proprietà in linea in questo modo:

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

Per esempio:

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

Questo è essenzialmente menzionato sopra, e sicuramente fa il trucco.

A proposito, questo è utile in casi come quando è necessario cancellare uno stato dopo l'animazione. Sicuramente potrei scrivere una mezza dozzina di lezioni per affrontare questo, oppure potrei usare la mia classe di base e #id fare un po 'di matematica e cancellare lo stile in linea che si applica all'animazione.

$(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.

*/

O

//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(";"));
        });
    }
});

Come nota, a seconda della proprietà potresti essere in grado di impostarlo su auto.

Impostare il valore predefinito, ad esempio:

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

o nel caso di altre funzionalità CSS

$ (questo) .css ("altezza", "eredita");

In realtà il modo migliore che ho trovato per farlo quando devo fare uno stile complesso basato su jquery, per esempio, se hai un modale che devi visualizzare ma deve calcolare gli offset di pagina per ottenere i parametri corretti in cui dovrai andare la funzione a jQuery ("x"). css ({}).

Ecco quindi l'impostazione degli stili, l'output di variabili calcolate in base a vari fattori.

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

Al fine di cancellare quegli stili. piuttosto che impostare qualcosa di simile

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

Il modo semplice sarebbe

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

Quando jquery manipola gli elementi sulla dom, gli stili vengono scritti sull'elemento nell'attributo "style" come se stessi scrivendo gli stili in linea. Tutto quello che devi fare è cancellare quell'attributo e l'oggetto dovrebbe ripristinare i suoi stili originali

Spero che questo ti aiuti

ho anche lo stesso prob, basta rimuovere il valore

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

Se non vuoi usare le classi (cosa che dovresti davvero), l'unico modo per ottenere ciò che vuoi è salvare prima gli stili che cambiano:

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

// set style
// do your thing

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

Ho usato la seconda soluzione di user147767

Tuttavia, c'è un errore di battitura qui. Dovrebbe essere

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

non <= 0

Ho anche cambiato questa condizione per:

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

come a volte aggiungiamo una proprietà css su jQuery e viene aggiunta in modo diverso per browser diversi (ad esempio la proprietà border verrà aggiunta come "border" per Firefox e "border-top", "border-bottom" ecc. per IE ).

Prima di aggiungere una classe dovresti verificare se aveva già classe con il metodo .hasClass ()

Per la tua domanda specifica. Dovresti mettere le tue cose nel foglio di stile a cascata. È consigliabile separare design e funzionalità.

quindi la soluzione proposta per aggiungere e rimuovere i nomi di classe è la migliore pratica.

tuttavia quando manipoli elementi non controlli il modo in cui sono resi. removeAttr ('style') è il modo MIGLIORE per rimuovere tutti gli stili in linea.

Ho modificato di user147767 soluzione un po 'per rendere possibile l'uso strings, arrayse objectscome input:

/*!
 * 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/