Como faço para remover a definição de um atributo CSS de um elemento usando jQuery?

93

Se eu definir um valor CSS em um elemento específico usando:

$('#element').css('background-color', '#ccc');

Eu quero ser capaz de remover esse valor específico do elemento e usar o valor em cascata, ao longo das linhas de:

$('#element').css('background-color', null);

Mas essa sintaxe parece não funcionar - isso é possível usando outra sintaxe?

Editar: o valor não é herdado do elemento pai - os valores originais vêm de um seletor de nível de elemento. Desculpem qualquer confusão!

jquery css

— cdleary
fonte

140

Dos documentos jQuery :

Definir o valor de uma propriedade de estilo como uma string vazia - por exemplo $('#mydiv').css('color', '')- remove essa propriedade de um elemento se ela já tiver sido aplicada diretamente, seja no atributo de estilo HTML, por meio do .css()método jQuery ou por meio da manipulação DOM direta da stylepropriedade. No entanto, isso não remove um estilo que foi aplicado com uma regra CSS em uma folha de estilo ou <style>elemento.

— Glenn Moss
fonte

Eu me deparei com essa pergunta quando tive esse problema. No meu caso, eu estava definindo o atributo css em um styleatributo da tag, então esse método não funcionou. Aplicar o estilo com o .css()método em vez de na tag me permitiu removê-lo mais tarde.

— Glenn Moss

14

Acho que você também pode fazer:

$('#element').css('background-color', '');

Isso é o que eu costumava fazer há muito tempo para a displaypropriedade em plain-old-javascript para mostrar / ocultar um campo.

— FryGuy
fonte

4

Na verdade, a sintaxe que pensei estar incorreta (com null) parece estar funcionando - meu seletor foi apenas formado incorretamente e, portanto, não produzindo elementos. D'oh!

— cdleary
fonte

21

A partir do jquery 1.4.3 css(..., null)não funciona e css(..., '')deve ser usado em seu lugar - bugs.jquery.com/ticket/7233

— Tim Sylvester

3

Experimente isto:

$('#element').css('background-color', 'inherit');

— HectorMac
fonte

1

Herdar infelizmente não é o comportamento que estou procurando: "a propriedade tem o mesmo valor calculado que a propriedade do pai do elemento" em w3.org/TR/CSS2/cascade.html

— cdleary

Mais provavelmente 'inicial' do que 'herdar'. 'Herdar' se adapta do pai, 'Inicial' faz o que a palavra diz.

— Chris S.

0

Pelo que vale, isso parece não funcionar no IE 8 para 'filtro', eu tive que usar isso (no retorno de chamada fadeIn):

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

Obviamente, eu precisei remover uma declaração de filtro in-line vazia para que o CSS pudesse ter efeito; havia outras regras embutidas, então não pude simplesmente remover o atributo de estilo.

— Brandon Hill
fonte

-1

Se puder ajudar, adiciono um problema com aspas duplas:

$('#element').css("border-color", "");

não funciona enquanto

$('#element').css('border-color', '');

trabalho

— merlintintina
fonte