Como remover a propriedade css no jQuery


197
if(prev_clicked)
{   
    $("#accordion li a.category").css('background-image', 'url("img/off_all_channel.png")');                    
    $("#accordion li a.comment").css('background-image', 'url("img/on_all_online.png")');                   
    $(".icha0").removeProperty("background-color");
    $(".icha0").removeProperty("opacity");
}
else
{   
   $(".icha0").css("background-color","#D5D5D2");
   $(".icha0").css("opacity","0.70");
}

Estou tentando remover duas propriedades css que adicionei, mas parece que não está funcionando. Qualquer um?


1
Além disso, tente o Google antes de postar aqui. Não tenho dúvida de que o primeiro resultado para o título exato que você postou aqui retornaria um resultado aceitável. Não tenho ideia de onde você veio .removeProperty().
— Christian

1
@ Christian Varga, o que é engraçado, agora que ele postou essa pergunta, é o primeiro resultado do Google. O segundo resultado é outra resposta correta de estouro de pilha. O terceiro é "removeProp ()" e o quarto é "removeAttr ()", ambos estão errados.
— rocketsarefast

Respostas:


369

Você pode removê-los:

$(".icha0").css({ 'background-color' : '', 'opacity' : '' });

26
É um pouco tarde para responder, mas acho que isso é importante. Você deve ter em mente que isso removerá apenas os atributos do elemento definidos no atributo "style". Isso não terá efeito se eles forem atribuídos a uma classe ou similar.
— José Carlos

15
Se você precisar remover um conjunto de propriedades por meio de uma classe, poderá definir como 'inicial' em vez de ''
— James Brierley

82

Você pode usar .css()para remover a propriedade css também, assim:

$(".icha0").css("background-color","");
$(".icha0").css("opacity","");

Conforme mencionado na documentação do jquery:

Definir o valor de uma propriedade de estilo como uma sequência vazia - por exemplo, $ ('# mydiv'). Css ('color', '') - remove essa propriedade de um elemento se ele já tiver sido aplicado diretamente,


16
No jqeury css: "No entanto, ele não remove um estilo que foi aplicado com uma regra CSS em uma folha de estilo ou elemento <style>"
— eggmatters 28/01/2015

36

Para remover a propriedade CSS in-line, use:

$('.className').css({propertyName: ''});

Para remover todo o estilo em linha de um elemento, use:

$('.className').removeAttr('style');

Eu também encontrei esta sugestão para remover a propriedade CSS dos estilos (arquivo separado):

$ ('. className'). style.propertyName = '';

Mas eu não consegui fazê-lo funcionar, então estou colocando aqui apenas para sua informação.


4
$ ('. className'). style.propertyName = ''; deve ser $ ('. className') [0] .style.propertyName = ''; - mas é abolutly absurdo
— SuperNova

20

Você pode definir as propriedades novamente em branco:

$(".icha0").css("background-color","");

Ou você pode alterar o código para usar as classes definidas em um arquivo CSS:

$(".icha0").addClass('properties'); 
$(".icha0").removeClass('properties');

Ajudou a remover bordas irregulares devido a perspectivas 3D aninhadas. Fiquei frustrado ao tentar remover uma das perspectivas, a fim de corrigir o problema do anti-alias, este post salvou meu dia! Obrigado!
— Richard Yan

3

Temos duas maneiras: você pode remover diretamente a classe de estilo CSS aplicada que é aplicada ao elemento DOM ou remover o estilo CSS aplicado do elemento

//Remove the class associated with element

$('#ID').removeClass("cssClass");

//Remove the CSS style from DOM element

$('p').css({"color":""});

3
Não há nada novo nesta resposta, não faz sentido repetir outras respostas.
— Shadow Wizard é Ear For You (

3

Eu estava tendo esse problema, mas não vi nenhuma solução aqui que satisfaça o OP. A maioria das soluções sugere livrar-se de todo o atributo de estilo, que não vale a pena.

Eu usei o método prop do jQuery .

var styleObject = $('my-selector').prop('style'); 

styleObject.removeProperty('background-color');

2

Alterne menos que a opção ideal, mas pode solucionar vários problemas. Adicione uma nova classe ao elemento com valor herdado :

css

.clearCSS {
    background-color: inherit !important;
}

jquery

$(".icha0").addClass('clearCSS'); 

2

Esta é literalmente uma cópia colada desta resposta , e eu a uso para limpar o estilo CSS que adicionei com o jQuery em uma função executada anteriormente.

Para remover a propriedade CSS in-line, use:

$('.className').css({propertyName: ''});   

Para remover todo o estilo em linha de um elemento, use:

$('.className').removeAttr('style');

OU por ID:

$('#idName').removeAttr('style');

1

Para remover toda a propriedade CSS no JQuery, o seguinte código pode ser usado:

    $(".selector").removeClass().removeAttr('style');

Obrigado.


1

se você precisar remover e não atualizar uma propriedade específica, basta usar removeProp e não removeProperty :

$(".icha0").removeProp("background-color");
$(".icha0").removeProp("opacity");
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.