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.