Como posso remover um estilo adicionado com a função .css ()?


868

Estou mudando CSS com jQuery e desejo remover o estilo que estou adicionando com base no valor de entrada:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Como posso fazer isso?
Observe que a linha acima é executada sempre que uma cor é selecionada usando um seletor de cores (ou seja, quando o mouse se move sobre uma roda de cores).

2ª nota: não posso fazer isso css("background-color", "none")porque removerá o estilo padrão dos arquivos CSS .
Eu só quero remover o background-colorestilo embutido adicionado pelo jQuery .



é melhor tentar addClass / removeClass com base na sua funcionalidade. Isso não afetará outros estilos.
precisa

Respostas:


1333

Alterar a propriedade para uma sequência vazia parece fazer o trabalho:

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

4
@ baacke É uma pena quando o suposto "padrão" está terrivelmente desatualizado e perde muito tempo de desenvolvimento. Tenho pouca simpatia pelas empresas que optam por usar software desatualizado; não vejo por que devo dedicar mais tempo a desenvolver para elas.
18714 Andrewb

33
Eu tenho que ficar do lado do @baacke aqui. Nosso cliente ainda possui um requisito mínimo oficial de IE6 (!!). O problema é que seus clientes estão em todo o mundo, incluindo países menos desenvolvidos. Os "clientes do cliente" podem estar usando computadores muito antigos para fazer negócios com ele. Então navegador antigo deve ser de pelo menos minimamente suportado ou correm o risco de perder o negócio ...
user1429080

8
Vocês não conseguem definir os requisitos de qualquer solução que desenvolvam para um cliente. Se esse cliente deseja ou precisa de suporte para um navegador antigo, é seu trabalho fornecê-lo, ponto final. Vocês falando sobre "quem se importa" dão aos verdadeiros engenheiros um nome ruim.
Ed Degagne

5
@EdDeGagne - Você precisa constantemente parar de oferecer suporte a versões mais antigas do IE. Isso melhora sua base de código e motiva os visitantes a não usar um IE antigo. A única coisa difícil é descobrir quando você pode deixar o suporte. Os sites do Google, com muitos visitantes, se eles decidiram abandonar um IE antigo, então você pode confiar neles que foi uma boa decisão. Uma empresa chegou a dizer a seus usuários que vale a pena comprar mais para cada usuário antigo do IE um computador moderno do que manter o código do IE (que é exatamente o que eles ofereceram).
precisa

5
Eu parei de ler quando eu vi "IE8 ainda é o padrão, mesmo no Windows 7"
Capsule

544

A resposta aceita funciona, mas deixa um styleatributo vazio no DOM nos meus testes. Não é grande coisa, mas isso remove tudo:

removeAttr( 'style' );

Isso pressupõe que você deseja remover todo o estilo dinâmico e retornar ao estilo da folha de estilo.


Esta é uma idéia boa, mas buggy jQuery, veja o bug submetido: bugs.jquery.com/ticket/9500
Tosh

4
@Tosh Esse bug foi resolvido em 25/08/2011
ThinkingStiff

Eu sei, mas pelo menos na versão 1.7 ainda é buggy, eu não testei 1.8
Tosh

7
Isso removerá todas as outras propriedades no atributo style também. Então escolha sabiamente.
Codingrhythm

1
Isso é inteligente! a resposta aceita não funcionaria em situações em que o estilo embutido criado pelo jquery deveria substituir os estilos css, mas esse método funciona bem em todas as situações.
Farzad YZ

170

Existem várias maneiras de remover uma propriedade CSS usando o jQuery:

1. Configurando a propriedade CSS para seu valor padrão (inicial)

.css("background-color", "transparent")

Veja o valor inicial da propriedade CSS em MDN . Aqui o valor padrão é transparent. Você também pode usar inheritpara várias propriedades CSS para herdar o atributo de seu pai. No CSS3 / CSS4, você também pode usar initial, revertou unsetessas palavras-chave podem ter suporte limitado ao navegador.

2. Removendo a propriedade CSS

Uma string vazia remove a propriedade CSS, ou seja,

.css("background-color","")

Mas tenha cuidado, conforme especificado na documentação do jQuery .css () , isso remove a propriedade, mas há problemas de compatibilidade com o IE8 para determinadas propriedades abreviadas de CSS, incluindo plano de fundo .

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 já tiver sido aplicada diretamente, seja no estilo HTML atributo, pelo método .css () do jQuery ou pela manipulação direta do DOM da propriedade style. No entanto, ele não remove um estilo que foi aplicado com uma regra CSS em uma folha de estilo ou elemento. Aviso: uma exceção notável é que, para o IE 8 e abaixo, a remoção de uma propriedade abreviada, como borda ou plano de fundo, removerá completamente esse estilo do elemento, independentemente do que estiver definido em uma folha de estilo ou elemento .

3. Removendo todo o estilo do elemento

.removeAttr("style")

49

Peguei o caminho para remover um atributo de estilo com JavaScript puro, apenas para que você saiba o caminho do JavaScript puro

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

11
O cara já usa jQuery ... por que se preocupar em reimplementar um método entre navegadores!?!?
billy

32
porque jquery não é tudo, porque ela ou talvez eu devesse dizer que todos nós, como desenvolvedores, devíamos saber o que significa compatibilidade e como fazer coisas com linguagens básicas como JavaScript, talvez essa seja minha teoria que já criei minha própria estrutura do meu conhecimento do JavaScript básico, eu me recuso a usar outras coisas, tenho meu próprio conceito e minha maneira de pensar :) e, a propósito, obrigado pelo seu (-), eu só precisava ter um valor agregado :) e também pela maneira como o cara is not um cara que ela é uma chamou Alex
Marwan

1
Eu só quero observar que você não deve verificar document.all se não o usar. Talvez você deva verificar assim: if (elm.style.removeProperty) {elm.style.removeProperty (propertyName); } else if (elm.style.removeAttribute) {elm.style.removeAttribute (attributeName); }
Richard

bem, você está certo, deve ser assim se (navigator.appName == "Microsoft Internet Explorer") document.body.style.removeAttribute ('background-color'); mais document.body.style.removeProperty ('background-color'); e por outro lado a sua solução é certo também :) obrigado pela sua nota
Marwan

9
Não, você definitivamente deve verificar se essa função existe em vez de verificar o navegador. E se a MS decidir alterar o nome da função na próxima versão do IE? Você também verifica a versão do IE?
J03w


19

qualquer uma dessas funções jQuery deve funcionar:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

22
Para remover apenas uma propriedade css:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
ilgaar 6/13

igaar - sua solução é a melhor. Coloquei-o em um loop '.each' para um monte de células da tabela que tinham "display: none" que precisavam ir, mas com outras propriedades que precisavam permanecer. Funcionou perfeitamente, simplesmente removendo a tela: nenhuma e deixando o resto.
Rob Von Nesselrode

9

Apenas usando:

$('.tag-class').removeAttr('style');

ou

$('#tag-id').removeAttr('style');

Isso também removerá outros estilos adicionados em linha, não apenas cores.
LongInt 21/02

7

Que tal algo como:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Eu gosto deste! Você remove a propriedade especificada e nada mais.
Joel #

7

Use meu plug-in:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Para o seu caso, use-o da seguinte forma:

$(<mySelector>).removeCss();

ou

$(<mySelector>).removeCss(false);

se você deseja remover também o CSS definido em suas classes:

$(<mySelector>).removeCss(true);

$(this).removeAttré redundante e this.removeAttrdeve ser suficiente.
Emile Bergeron

Será que removeAttr irá remover também classattr? acho que não #
Abdennour TOUMI

Eu estou falando sobre o removeAttrinterior do seu plugin, onde thisjá é um elemento jQuery. $(this)é redundante.
Emile Bergeron

2
Ah! OK OK .. @EmileBergeron, o antigo jquery fornece thiscomo HTMLElementinstância mapeada para o elemento jQuery ... Como você vê, minha resposta é antiga ... é por isso que ... de qualquer maneira, eu posso te dizer por que eles mudam isso, eles fazem isso por causa da função de seta que é nova no ES6. .. e thisse torna inútil e foi substituído porevent.currentTarget
Abdennour TOUMI 29/11

1
Justo! ;) Engraçado como os 3 anos têm idade no mundo da JS.
Emile Bergeron

7

Tente o seguinte:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

obrigado


O único problema com o "remover existente" é que ele também substituirá o plano de fundo da folha de estilo, se houver um conjunto.
Jtbs

6

Se você usa o estilo CSS, pode usar:

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

e substitua por:

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

Se você não usar o estilo CSS e tiver um atributo no elemento HTML, poderá usar:

$("#element").attr("style.background-color",color);

6

2018

existe uma API nativa para isso

element.style.removeProperty(propery)


2

Por que não criar o estilo que você deseja remover uma classe CSS? Agora você pode usar: .removeClass(). Isso também abre a possibilidade de usar:.toggleClass()

(remova a classe, se estiver presente, e adicione-a, se não estiver.)

Adicionar / remover uma classe também é menos confuso para alterar / solucionar problemas ao lidar com problemas de layout (em vez de tentar descobrir por que um estilo específico desapareceu.)


2
let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

1

Isso é mais complexo do que algumas outras soluções, mas pode oferecer mais flexibilidade nos cenários:

1) Faça uma definição de classe para isolar (encapsular) o estilo que você deseja aplicar / remover seletivamente. Pode estar vazio (e, neste caso, provavelmente deveria estar):

.myColor {}

2) usar esse código, baseado em http://jsfiddle.net/kdp5V/167/ de esta resposta por gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Exemplo de uso: http://jsfiddle.net/qvkwhtow/

Ressalvas:

  • Não extensivamente testado.
  • Não é possível incluir diretivas importantes ou outras no novo valor. Quaisquer diretivas existentes serão perdidas com essa manipulação.
  • Altera apenas a ocorrência encontrada pela primeira vez de um styleSelector. Não adiciona ou remove estilos inteiros, mas isso pode ser feito com algo mais elaborado.
  • Quaisquer valores inválidos / inutilizáveis ​​serão ignorados ou gerarão erros.
  • No Chrome (pelo menos), as regras CSS não locais (como no site) não são expostas pelo objeto document.styleSheets, portanto, isso não funcionará nelas. Seria necessário adicionar substituições locais e manipular isso, tendo em mente o comportamento "encontrado primeiro" desse código.
  • document.styleSheets não é particularmente amigável à manipulação em geral, não espere que isso funcione para uso agressivo.

Isolar o estilo dessa maneira é a essência do CSS, mesmo que manipulá-lo. Manipular regras CSS NÃO é do que se trata o jQuery, o jQuery manipula elementos DOM e usa seletores CSS para fazer isso.


1

Simples é barato no desenvolvimento web. Eu recomendo usar uma string vazia ao remover um estilo específico

$(element).style.attr = '  ';

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.