javascript - with - w3s jquery css




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

Estou mudando o 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: Eu não posso fazer isso com css("background-color", "none") porque ele irá remover o estilo padrão dos arquivos css. Eu só quero remover o estilo inline de background-color adicionado pelo jQuery.


2018

existe uma API nativa para isso

element.style.removeProperty(propery)

Alterar a propriedade para uma string vazia parece fazer o trabalho.

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


Este também funciona !!

$elem.attr('style','');

Eu tenho 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');

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 para este caso, provavelmente deveria ser):

.myColor {}

2) use este código, baseado em http://jsfiddle.net/kdp5V/167/ desta 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 importantes ou outras diretivas no novo valor. Quaisquer diretivas existentes serão perdidas por meio dessa manipulação.
  • Altera apenas a primeira ocorrência encontrada de um styleSelector. Não adiciona ou remove estilos inteiros, mas isso pode ser feito com algo mais elaborado.
  • Qualquer valor inválido / inutilizável será ignorado ou lançará um erro.
  • No Chrome (pelo menos), as regras CSS não locais (como no cross-site) não são expostas através do objeto document.styleSheets, então isso não funcionará nelas. Seria necessário adicionar um overrides local e manipulá-lo, tendo em mente o comportamento "primeiro encontrado" deste 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 forma é o que é CSS, mesmo se a manipulação não for. Manipulação de regras CSS não é o que jQuery é tudo, jQuery manipula elementos DOM e usa seletores CSS para fazê-lo.


Isso removerá a tag completa:

  $("body").removeAttr("style");

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

Se você usar o estilo CSS, poderá usar:

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

e depois 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);

Tente isto

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');

Tente isto:

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

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

obrigado


qualquer uma dessas funções do jQuery deve funcionar:

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

A resposta aceita funciona, mas deixa um atributo de style vazio no DOM em 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.





css