Como posso apagar todos os estilos embutidos com javascript e deixar apenas os estilos especificados na folha de estilo css?


94

Se eu tiver o seguinte em meu html:

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

E isso na minha folha de estilo css:

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

Existe alguma maneira, com javascript / jquery, de remover todos os estilos embutidos e deixar apenas os estilos especificados pela folha de estilo css?

Respostas:


166

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

ou

$('div').removeAttr('style');(Da resposta de Andrés )

Para diminuir um pouco, tente o seguinte:

$('div[style]').removeAttr('style');

Isso deve acelerar um pouco, porque verifica se os divs têm o atributo style.

De qualquer forma, isso pode demorar um pouco para ser processado se você tiver uma grande quantidade de divs, então você pode querer considerar outros métodos além do javascript.


Se tiver que remover o atributo style, também terá que procurá-lo, então a última solução parece ser apenas tornar o código mais sujo. O melhor, claro, seria selecionar apenas os elementos de que você precisa para que o estilo seja removido, possivelmente via ID.
Jose Faeti

Isso só vai segmentar divs. E se você quiser direcionar tudo?
poste de luz

1
Como um aparte relacionado, chamar .css()com uma string vazia como o segundo valor removerá apenas o valor nomeado dos estilos embutidos, por exemplo, $ ('div'). Css ('display', ''); irá remover apenas a propriedade de exibição embutida (se definida).
Tom Davies

2
@streetlight Use $('*').removeAttr('style')para direcionar tudo.
Makaze

Não, na verdade o segundo deve ser um pouco mais rápido, porque se JQuery tiver algum sentido, ele usará o atributo removeat padrão. Além disso, você se esquece da enorme sobrecarga ineficiente de fazer um loop através de mais elementos DOM, o que torna o segundo método ainda mais rápido do que o primeiro.

32

JavaScript simples:

Você não precisa do jQuery para fazer algo trivial como isso. Basta usar o .removeAttribute()método.

Supondo que você esteja alvejando apenas um único elemento, você pode facilmente usar o seguinte: (exemplo)

document.querySelector('#target').removeAttribute('style');

Se você está almejando vários elementos, basta percorrer a coleção selecionada de elementos: (exemplo)

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach() - IE9 e superior / .querySelectorAll() - IE 8 (parcial) IE9 e superior.


1
Uma alternativa para Array.prototype.forEach.callo operador de splat razoavelmente bem suportado, o que economiza uma linha: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22
$('div').removeAttr('style');

Isso é mais eficiente do que fazer attr ('style', '')?
Matt

com $ ('div'). attr ('estilo', ''); <div style = ""> </div> com $ ('div'). removeAttr ('style'); <div> </div> é mais limpo
andres descalzo

provavelmente, porque ele não está definindo um valor nulo, mas de qualquer forma, você terá um grande tempo de processamento porque ele tem que passar por cada div no corpo.
Tyler Carter

sim, está claro, deve ser alterado para um ID $ ("# id") ou uma classe $ (".classDivs)
andres descalzo

3

Eu estava usando o $('div').attr('style', ''); técnica e não funcionava no IE8.

Produzi o atributo de estilo usando alert() e ele não estava eliminando estilos embutidos.

.removeAttr acabou fazendo o truque no IE8.


3

Se você precisa apenas esvaziar o stylede um elemento, então:
element.style.cssText = null;
Isso deve ser bom. Espero que ajude!


Uma lógica semelhante parece se aplicar se tentar "esvaziar" apenas uma única propriedade de estilo para um elemento: element.style.display = null;- isso é o que eu precisava: D
Bilal Akil

1

Isso pode ser feito em duas etapas:

1: selecione o elemento que deseja alterar por tagname, id, classe etc.

var element = document.getElementsByTagName('h2')[0];

  1. remova o atributo de estilo

element.removeAttribute('style');


-2

Você também pode tentar listar o css na folha de estilo como! Important


3
embora isso funcionasse, é uma prática terrível apenas substituir estilos inline por! important para removê-los
joshvermaire
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.