respuestas - remover atributo con jquery

Eliminar CSS de una Div usando JQuery

Question

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 una div, el color de esa div cambia. Dentro de esa función Click tengo algunas funcionalidades para hacer. Después de todo, quiero eliminar el Css aplicado de la Div. ¿Cómo podría hacerlo en JQuery?

Answer 1

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

Para su pregunta específica. Deberías poner tus cosas en la Hoja de Estilo en Cascada. Lo mejor es separar el diseño y la funcionalidad.

por lo que la solución propuesta para agregar y eliminar nombres de clase es la mejor práctica.

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

Answer 2

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

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

Entonces, donde sus "otras funcionalidades" son hacer algo como:

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

Answer 3

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

Answer 4

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

Así que aquí está la configuración de los estilos, el resultado 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 así 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 estuviese 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

Answer 5

Establezca el valor predeterminado, por ejemplo:

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

o en el caso de otras características de CSS

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

Answer 6

Modifiqué un poco la solution de user147767 para hacer posible el uso de strings , arrays y objects como entrada:

/*!
 * jquery.removecss.js v0.2 - https://.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/

Answer 7

Puede eliminar css específicos que están 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 de CSS.

Answer 8

Puede eliminar las propiedades en línea de esta manera:

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

Por ejemplo:

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

Esto es esencialmente mencionado anteriormente, y definitivamente es 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 tratar con esto, o podría usar mi clase base y #id hacer algunos cálculos matemáticos, 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'':''''});
});

Answer 9

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

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

Answer 10

Si no desea utilizar las clases (lo que realmente debería hacer), la única manera 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...

Answer 11

Tengo el mismo problema también, solo elimine el valor

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

Answer 12

Usé la segunda solución de usuario147767

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 por:

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

como a veces agregamos una propiedad css sobre jQuery, y se agrega de una manera diferente para diferentes navegadores (es decir, la propiedad del borde se agregará como "borde" para Firefox, y "borde superior", "borde inferior", etc. para IE )

Answer 13

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