como remover a propriedade css usando javascript?

195

é possível remover uma propriedade CSS de um elemento usando JavaScript? por exemplo, eu tenho div.style.zoom = 1.2, agora eu quero remover a propriedade zoom através de JavaScript?

javascript css

— Sentou
fonte

3

Esclareça: você está tentando remover uma classe de algum elemento ou um atributo de algum elemento?

— Jan Hančič

1

Desculpe por isso, não uma classe, atributo para um elemento.

— sentou

por que voto negativo? é uma pergunta decente o suficiente, não?

— Roland Bouman

2

Olá, sentou-se, eu não entendo - por que você marcou a resposta dos naivistas como "resposta aceita"? Quero dizer, a solução dele é boa, caso você queira encontrar elementos por classe, mas tudo na sua pergunta indica que você estava procurando um método para alterar o efeito de definir uma propriedade do estilo local. Certamente, minha resposta se encaixa melhor no problema? Talvez eu tenha entendido mal sua pergunta?

— Roland Bouman

1

@RolandBouman, na verdade, a resposta aceita deve ser alterada para Edvinas Ilčenko porque aborda o que foi perguntado sobre remoção, em vez de mudar para o padrão. Sua resposta ainda tem valor, por isso a editei para esclarecer a distinção.

— whitneyland

187

Você tem duas opções:

OPÇÃO 1:

Você pode usar o método removeProperty . Ele removerá um estilo de um elemento.

el.style.removeProperty('zoom');

OPÇÃO 2:

Você pode configurá-lo para o valor padrão:

el.style.zoom = "";

O zoom efetivo agora será o que se segue das definições definidas nas folhas de estilo (por meio de tags de link e estilo). Portanto, essa sintaxe modifica apenas o estilo local desse elemento.

— Roland Bouman
fonte

… Junto com o CSS do usuário e os estilos padrão do navegador.

— Quentin

Entendi que o OP significava que eles queriam fazê-lo como se não tivessem definido a propriedade de estilo do elemento, que é exatamente o que você forneceu. Eu tentei usar el.style.removeProperty ('zoom'); (ou 'preencher', na verdade, no meu caso) que parece fazer a mesma coisa no IE e ser ignorado pelos outros navegadores. Por alguma razão, fiquei surpreso ao descobrir que defini-la como uma sequência em branco tem o mesmo efeito e parece funcionar em todos os (versões recentes) dos navegadores.

— Shavais

Esse comportamento é especificado em algum lugar de um padrão? Não consigo encontrar :-(

— Oliver Joseph Ash

@OliverJosephAsh sim ele está documentado, veja esta resposta abaixo stackoverflow.com/a/7901886/700206

— whitneyland

120

removeProperty removerá um estilo de um elemento.

Exemplo:

div.style.removeProperty ('zoom');

Página de documentação do MDN:
CSSStyleDeclaration.removeProperty

— Edvinas Ilčenko
fonte

25

div.style.removeProperty('zoom');

— Joe
fonte

10

Você pode usar o objeto styleSheets:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

Advertência nº 1: você precisa conhecer o índice da sua folha de estilo e o índice da sua regra.

Advertência # 2: Este objeto é implementado inconsistentemente pelos navegadores; o que funciona em um pode não funcionar nos outros.

— james.garriss
fonte

Isso parece realmente quebradiço. Não quebrará sempre que seus índices mudarem?

— Casey Rodarmor 9/10/12

Sim. Isso é exatamente o que a advertência nº 1 diz.

— James.garriss 9/10/12

O meu Chrome 26 não tem CSSStyleRule.prototype.removeProperty= (Na verdade CSSStyleRulenão tem nenhum métodos = (.

— Rudie

CSSStyleSheet.prototype.removeRulepara o resgate.

— quer

@ Rudie, não é CSSStyleSheet.prototype.deleteRule?

— Rok

7

element.style.height = null;

resultado:

<div style="height:100px;"> 
// results: 
<div style="">

— T.Todua
fonte

Parece que definir estilo como nulo não funciona no IE11.

— MaximeW # 08/19

1

Por que alguém deve cuidar de IEnavegadores? Eu intencionalmente os ignoro já há anos.

— T.Todua 29/04

4

Você pode tentar encontrar todos os elementos que possuem essa classe e definir a propriedade "zoom" como "nothing".

Se você estiver usando a biblioteca javascript jQuery, poderá fazê-lo com $(".the_required_class").css("zoom","")

Edit: Removida esta afirmação por se revelar não verdadeira, como apontado em um comentário e em outras respostas que de fato é possível desde 2010.

Falso: não há uma maneira conhecida de modificar folhas de estilo do JavaScript.

— ingênuos
fonte

5

Sim existe. Modificando folhas de estilo de forma programática, embora o javascript não seja difícil. Ele funciona em vários navegadores com ótimo desempenho e realmente faz sentido ao alterar uma propriedade que deve ser a mesma em vários elementos. Como foi o caso em janeiro de 2010 também. Aqui está um breve exemplo: stackoverflow.com/questions/14927706/…

— Clox 8/13

Clox: Adicionando folhas de estilo que substituem alguma propriedade programaticamente - é claro! Modificando os que já foram carregados - Não ouvi falar.

— naivists

É para ser css () ao invés de attr (). Ou talvez seja attr () no IE?

— Alex KeySmith

na verdade deveria ser css, não attr, você está certo.

— naivists

1

Você também pode fazer isso no jQuery dizendo $(selector).css("zoom", "")

— TryingToImprove
fonte

0

Isso deve funcionar - definir o estilo embutido como normal para o zoom:

$ ('div'). attr ("estilo", "zoom: normal;");

— Matt
fonte

1

A questão era como remover um estilo; esta resposta destruirá todos os estilos existentes e os substituirá pela nova entrada.

— whitneyland

0

na verdade, se você já conhece a propriedade, isso será feito ...

por exemplo:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    }

Observe que isso funciona apenas para estilos embutidos ... não para os estilos especificados por meio de uma classe ou algo parecido ...

Outra observação: talvez você precise escapar de alguns caracteres nessa instrução de substituição, mas você entendeu.

— MaxOvrdrv
fonte

-3

Para alterar todas as classes para um elemento:

document.getElementById("ElementID").className = "CssClass";

Para adicionar uma classe adicional a um elemento:

document.getElementById("ElementID").className += " CssClass";

Para verificar se uma classe já está aplicada a um elemento:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )

— thejustv
fonte

1

A questão era como remover um estilo, essa resposta não tem nada a ver com isso.

— whitneyland