come rimuovere la proprietà css usando javascript?

195

è possibile rimuovere una proprietà CSS di un elemento usando JavaScript? ad esempio ho div.style.zoom = 1.2, ora voglio rimuovere la proprietà zoom tramite JavaScript?

javascript css

— sat
fonte

3

Si prega di chiarire: stai cercando di rimuovere una classe da un elemento o un attributo da un elemento?

— Jan Hančič,

1

Ci dispiace per quello, non una classe, attributo per un elemento.

— sabato

perché downvote? è una domanda abbastanza decente no?

— Roland Bouman,

2

Ciao sat, non capisco - perché hai contrassegnato la risposta degli ingenui come "risposta accettata"? Voglio dire, la sua soluzione è buona nel caso in cui tu voglia trovare elementi per classe ma tutto nella tua domanda indica che stavi cercando un metodo per cambiare l'effetto dell'impostazione di una proprietà dello stile locale. Sicuramente, la mia risposta si adatta meglio al problema? Forse ho frainteso la tua domanda?

— Roland Bouman,

1

@RolandBouman in realtà la risposta accettata dovrebbe essere cambiata per essere quella di Edvinas Ilčenko perché si rivolge a ciò che è stato chiesto sulla rimozione piuttosto che passare all'impostazione predefinita. La tua risposta ha ancora valore, quindi l'ho modificata per chiarire la distinzione.

— Whitneyland,

187

Hai due opzioni:

OPZIONE 1:

È possibile utilizzare il metodo removeProperty . Rimuoverà uno stile da un elemento.

el.style.removeProperty('zoom');

OPZIONE 2:

Puoi impostarlo sul valore predefinito:

el.style.zoom = "";

Lo zoom effettivo sarà ora tutto quanto segue dalle definizioni impostate nei fogli di stile (tramite tag di collegamento e stile). Quindi questa sintassi modificherà solo lo stile locale di questo elemento.

— Roland Bouman
fonte

... insieme al CSS dell'utente e agli stili predefiniti del browser.

— Quentin,

Ho capito che l'OP voleva dire che volevano farlo come se non avessero impostato la proprietà style dell'elemento, che è esattamente quello che hai fornito. Ho provato a usare el.style.removeProperty ('zoom'); (o "riempire", in realtà, nel mio caso) che sembra fare la stessa cosa in IE e essere ignorato dagli altri browser. Per qualche motivo sono stato sorpreso di scoprire che impostarlo su una stringa vuota ha lo stesso effetto e sembra funzionare su tutti i browser (versioni recenti).

— Shavais,

Questo comportamento è specificato ovunque in uno standard? Non riesco a trovarlo :-(

— Oliver Joseph Ash,

@OliverJosephAsh si è documentato, questa risposta qui sotto stackoverflow.com/a/7901886/700206

— whitneyland

120

removeProperty rimuoverà uno stile da un elemento.

Esempio:

div.style.removeProperty ( 'ingrandire');

Pagina della documentazione MDN:
CSSStyleDeclaration.removeProperty

— Edvinas Ilčenko
fonte

25

div.style.removeProperty('zoom');

— joe
fonte

10

È possibile utilizzare l'oggetto styleSheets:

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

Avvertenza n. 1: devi conoscere l'indice del tuo foglio di stile e l'indice della tua regola.

Avvertenza n. 2: questo oggetto è implementato in modo incoerente dai browser; ciò che funziona in uno potrebbe non funzionare negli altri.

— james.garriss
fonte

Sembra molto fragile. Non si romperà ogni volta che cambieranno i tuoi indici?

— Casey Rodarmor,

Sì. Questo è esattamente ciò che dice l'avvertimento n. 1.

— james.garriss,

Il mio Chrome 26 non ha CSSStyleRule.prototype.removeProperty= (In realtà CSSStyleRulenon ha alcun metodo. = (

— Rudie

CSSStyleSheet.prototype.removeRuleAl salvataggio.

— Rudie,

@Rudie, vero CSSStyleSheet.prototype.deleteRule?

— roka,

7

element.style.height = null;

produzione:

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

— T.Todua
fonte

Sembra che l'impostazione dello stile su null non funzioni in IE11.

— MaximeW

1

Perché qualcuno dovrebbe occuparsi dei IEbrowser? Li ignoro intenzionalmente già da anni.

— T.Todua,

4

Puoi provare a trovare tutti gli elementi che hanno questa classe e impostare la proprietà "zoom" su "niente".

Se stai usando la libreria javascript jQuery, puoi farlo con $(".the_required_class").css("zoom","")

Modifica: rimossa questa affermazione in quanto si è rivelata non vera, come sottolineato in un commento e altre risposte, è davvero possibile dal 2010.

Falso: non esiste un modo generalmente noto per modificare i fogli di stile da JavaScript.

— naivists
fonte

5

Si C'è. Modificare i fogli di stile in modo programmatico anche se JavaScript non è difficile. Funziona su più browser con grandi prestazioni e ha davvero senso quando si cambia una proprietà che dovrebbe essere la stessa su un mucchio di elementi. Come nel caso del gennaio 2010. Ecco un breve esempio: stackoverflow.com/questions/14927706/...

— CLOX

Clox: aggiunta di fogli di stile che sovrascrivono alcune proprietà a livello di codice - ovviamente! Modifica di quelli già caricati - Non ne ho sentito parlare.

— naivisti l'

È pensato per essere css () piuttosto che attr (). O è forse attr () in IE?

— Alex KeySmith,

in realtà dovrebbe essere css, no attr, hai ragione.

— ingenui

1

Puoi anche farlo in jQuery dicendo $(selector).css("zoom", "")

— TryingToImprove
fonte

0

Questo dovrebbe fare il trucco: impostare lo stile in linea su normale per lo zoom:

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

— opaco
fonte

1

La domanda era: come rimuovere uno stile, questa risposta distruggerà tutti gli stili esistenti e li sostituirà con una nuova voce.

— Whitneyland,

0

in realtà, se conosci già la proprietà, questo lo farà ...

per esempio:

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

Nota che questo funziona solo per gli stili incorporati ... non per gli stili che hai specificato attraverso una classe o qualcosa del genere ...

Altra nota: potrebbe essere necessario sfuggire ad alcuni personaggi in quella dichiarazione di sostituzione, ma si ottiene l'idea.

— MaxOvrdrv
fonte

-3

Per modificare tutte le classi per un elemento:

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

Per aggiungere una classe aggiuntiva a un elemento:

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

Per verificare se una classe è già applicata a un elemento:

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

— thejustv
fonte

1

La domanda era come rimuovere uno stile, questa risposta non ha nulla a che fare con quello.

— Whitneyland,