Wie kann ich alle Inline-Stile mit Javascript löschen und nur die im CSS-Stylesheet angegebenen Stile belassen?

94

Wenn ich folgendes in meinem HTML habe:

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

Und das in meinem CSS-Stylesheet:

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

Gibt es eine Möglichkeit, mit Javascript / jquery alle Inline-Stile zu entfernen und nur die im CSS-Stylesheet angegebenen Stile zu belassen?

— Matt
quelle

166

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

oder

$('div').removeAttr('style');(Aus Andres 'Antwort )

Versuchen Sie Folgendes, um dies etwas zu verkleinern:

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

Dies sollte es ein wenig beschleunigen, da überprüft wird, ob die Divs das style-Attribut haben.

In beiden Fällen kann die Verarbeitung einige Zeit dauern, wenn Sie eine große Anzahl von Divs haben. Daher sollten Sie andere Methoden als Javascript in Betracht ziehen.

— Tyler Carter
quelle

Wenn das Stilattribut entfernt werden muss, muss es auch danach suchen, sodass die letzte Lösung den Code nur imho schmutziger zu machen scheint. Am besten wählen Sie natürlich nur die Elemente aus, für die der Stil entfernt werden soll, möglicherweise über die ID.

— Jose Faeti

Dies zielt nur auf Divs ab. Was ist, wenn Sie alles ins Visier nehmen möchten?

— Straßenlaterne

1

Abgesehen davon wird beim Aufrufen .css()mit einer leeren Zeichenfolge als zweitem Wert nur der benannte Wert aus den Inline-Stilen entfernt, z. B. $ ('div'). Css ('display', ''); entfernt nur die Inline-Anzeigeeigenschaft (falls festgelegt).

— Tom Davies

2

@streetlight Dient $('*').removeAttr('style')zum Zielen auf alles.

— Makaze

Nein, eigentlich sollte der zweite etwas schneller sein, denn wenn JQuery einen Sinn hat, wird das Standard-Remeateattribute verwendet. Außerdem vergessen Sie den massiven ineffizienten Aufwand für das Schleifen durch mehr DOM-Elemente, wodurch die zweite Methode noch schneller als die erste wird.

32

Einfaches JavaScript:

Sie brauchen jQuery nicht, um so etwas Triviales zu tun. Verwenden Sie einfach die .removeAttribute()Methode.

Angenommen, Sie zielen nur auf ein einzelnes Element, können Sie auf einfache Weise Folgendes verwenden: (Beispiel)

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

Wenn Sie auf mehrere Elemente abzielen, durchlaufen Sie einfach die ausgewählte Sammlung von Elementen: (Beispiel)

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

Array.prototype.forEach()- IE9 und höher / .querySelectorAll()- IE 8 (teilweise) IE9 und höher.

— Josh Crozier
quelle

1

Eine Alternative zu Array.prototype.forEach.callist der ziemlich gut unterstützte Splat-Operator, der eine Zeile speichert : [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22

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

— andres descalzo
quelle

Ist das effizienter als attr ('style', '')?

— Matt

mit $ ('div'). attr ('style', ''); <div style = ""> </ div> mit $ ('div'). removeAttr ('style'); <div> </ div> ist sauberer

— andres descalzo

wahrscheinlich, weil es nicht auf einen Nullwert gesetzt wird, aber so oder so werden Sie eine große Verarbeitungszeit bekommen, weil es jedes div im Körper durchlaufen muss.

— Tyler Carter

Ja, das ist klar, es sollte in eine ID $ ("# id") oder eine Klasse $ (".classDivs) geändert werden

— andres descalzo

3

Ich habe das benutzt $('div').attr('style', ''); Technik verwendet und sie hat in IE8 nicht funktioniert.

Ich habe das style-Attribut mit ausgegeben alert() und es wurden keine Inline-Stile entfernt.

.removeAttr endete den Trick in IE8.

— rtvenge
quelle

3

Wenn Sie nur das styleeines Elements leeren müssen, dann:
element.style.cssText = null;
Dies sollte gut tun. Ich hoffe es hilft!

— Tushar Shukla
quelle

Eine ähnliche Logik scheint zuzutreffen, wenn versucht wird, nur eine einzige element.style.display = null;

— Bilal Akil

1

Dies kann in zwei Schritten erreicht werden:

1: Wählen Sie das Element, das Sie ändern möchten, entweder nach Tagname, ID, Klasse usw. aus.

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

Entfernen Sie das Stilattribut

element.removeAttribute('style');

— JRulle
quelle

-2

Sie können auch versuchen, das CSS im Stylesheet als! Wichtig aufzulisten

— BoringCode
quelle

3

Während dies funktionieren würde, ist es eine schreckliche Praxis, nur Inline-Stile mit! wichtig zu überschreiben, um sie zu entfernen

— Joshvermaire