Remover CSS de uma Div usando JQuery

Eu sou novo no JQuery. No meu aplicativo, tenho o seguinte:

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

Quando clico em um Div, a cor desse Div é alterada. Dentro dessa função Click, tenho algumas funcionalidades a fazer. Afinal, eu quero remover o Css aplicado da Div. Como eu poderia fazer isso no JQuery?

Coloque suas propriedades CSS em uma classe e faça algo assim:

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

Então, onde estão suas 'outras funcionalidades', faça algo como:

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

Você pode remover css específico que está no elemento como este:

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

Embora eu concorde com karim que você provavelmente deveria estar usando classes CSS.

Você pode usar o método removeAttr, se desejar excluir todo o estilo embutido adicionado manualmente com javascript. É melhor usar classes CSS, mas você nunca sabe.

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

Você pode remover propriedades embutidas desta maneira:

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

Por exemplo:

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

Isso é essencialmente mencionado acima, e definitivamente faz o truque.

BTW, isso é útil em casos como quando você precisa limpar um estado após a animação. Claro que eu poderia escrever meia dúzia de classes para lidar com isso, ou poderia usar minha classe base e #id fazer algumas contas e limpar o estilo embutido que a animação se aplica.

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

*/

OU

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

Como observação, dependendo da propriedade, você poderá configurá-lo para automático.

Defina o valor padrão, por exemplo:

$ (this) .css ("altura", "automático");

ou no caso de outros recursos CSS

$ (this) .css ("altura", "herança");

Na verdade, a melhor maneira que encontrei para fazer isso ao ter que fazer um estilo complexo baseado em jquery, por exemplo, se você tem um modal que precisa exibir, mas precisa calcular os deslocamentos da página para obter os parâmetros corretos nos quais eles precisam entrar a função a jQuery ("x"). css ({}).

Então, aqui está a configuração dos estilos, a saída de variáveis ​​que foram computadas com base em vários fatores.

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

Para limpar esses estilos. ao invés de definir algo como

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

A maneira mais simples seria

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

Quando o jquery manipula elementos no dom, os estilos são gravados no elemento no atributo "style" como se você estivesse escrevendo os estilos inline. Tudo que você precisa fazer é limpar esse atributo e o item deve redefinir para seus estilos originais

Espero que isto ajude

Eu tenho o mesmo problema também, basta remover o valor

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

Se você não quiser usar classes (o que realmente deveria), a única maneira de conseguir o que deseja é salvando primeiro os estilos alterados:

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

// set style
// do your thing

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

Eu usei a segunda solução de user147767

No entanto, há um erro de digitação aqui. Deveria ser

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

não <= 0

Também alterei essa condição para:

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

como algumas vezes adicionamos uma propriedade css ao jQuery e é adicionada de maneira diferente para diferentes navegadores (por exemplo, a propriedade border será adicionada como "border" para Firefox, e "border-top", "border-bottom" etc. para IE )

Antes de adicionar uma classe, você deve verificar se ela já possui classe com o método .hasClass ()

Para sua pergunta específica. Você deve colocar suas coisas na Cascading Stylesheet. É uma prática recomendada separar design e funcionalidade.

portanto, a solução proposta para adicionar e remover nomes de classes é uma prática recomendada.

no entanto, ao manipular elementos, você não controla como eles são renderizados. removeAttr ('style') é a MELHOR maneira de remover todos os estilos embutidos.

I modificado de user147767 solução um pouco para torná-lo possível usar strings, arrayse objectscomo entrada:

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