Eliminar CSS de un Div usando JQuery

Soy nuevo en JQuery. En mi aplicación tengo lo siguiente:

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

Cuando hago clic en un Div, el color de ese Div cambia. Dentro de esa función Click tengo algunas funcionalidades que hacer. Después de todo lo que quiero eliminar el Css aplicado de la Div. ¿Cómo podría hacerlo en JQuery?

Coloque sus propiedades CSS en una clase, luego haga algo como esto:

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

Luego, donde están sus 'otras funcionalidades', haga algo como:

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

Puede eliminar css específicos que se encuentran en el elemento de esta manera:

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

Aunque estoy de acuerdo con Karim en que probablemente deberías estar usando clases CSS.

Puede usar el método removeAttr, si desea eliminar todo el estilo en línea que agregó manualmente con javascript. Es mejor usar clases CSS pero nunca se sabe.

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

Puede eliminar propiedades en línea de esta manera:

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

Por ejemplo:

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

Esto se menciona esencialmente anteriormente, y definitivamente hace el truco.

Por cierto, esto es útil en casos como cuando necesita borrar un estado después de la animación. Claro que podría escribir media docena de clases para lidiar con esto, o podría usar mi clase base y #id hacer algunas matemáticas, y borrar el estilo en línea que aplica la animación.

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

Como nota, dependiendo de la propiedad, puede configurarlo en automático.

Establezca el valor predeterminado, por ejemplo:

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

o en el caso de otras características CSS

$ (this) .css ("altura", "heredar");

En realidad, la mejor manera que he encontrado para hacer esto cuando tengo que hacer un estilo complejo basado en jquery, por ejemplo, si tiene un modal que necesita mostrar pero necesita calcular los desplazamientos de página para obtener los parámetros correctos en los que deberán ingresar la función a jQuery ("x"). css ({}).

Así que aquí está la configuración de los estilos, la salida de las variables que se han calculado en función de varios factores.

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

Para borrar esos estilos. en lugar de establecer algo como

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

La manera simple sería

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

Cuando jquery manipula elementos en el dom, los estilos se escriben en el elemento en el atributo "estilo" como si estuviera escribiendo los estilos en línea. Todo lo que tiene que hacer es borrar ese atributo y el elemento debe restablecerse a sus estilos originales

Espero que esto ayude

También tengo el mismo problema, solo elimine el valor

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

Si no desea utilizar clases (lo que realmente debería), la única forma de lograr lo que desea es guardar primero los estilos cambiantes:

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

// set style
// do your thing

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

Usé la segunda solución de user147767

Sin embargo, hay un error tipográfico aquí. Debería ser

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

no <= 0

También cambié esta condición para:

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

ya que a veces agregamos una propiedad css sobre jQuery, y se agrega de una manera diferente para diferentes navegadores (es decir, la propiedad de borde se agregará como "borde" para Firefox y "border-top", "border-bottom", etc. para IE )

Antes de agregar una clase, debe verificar si ya tenía clase con el método .hasClass ()

Para su pregunta específica Deberías poner tus cosas en una hoja de estilo en cascada. Se recomienda separar el diseño y la funcionalidad.

Por lo tanto, la solución propuesta de agregar y eliminar nombres de clase es la mejor práctica.

sin embargo, cuando manipulas elementos no controlas cómo se representan. removeAttr ('estilo') es la MEJOR forma de eliminar todos los estilos en línea.

Modifiqué un poco la solución de user147767 para que sea posible su uso strings, arraysy 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/