it-swarm.com.de

Wie kann ich einen mit der .css () - Funktion hinzugefügten Stil entfernen?

Ich ändere CSS mit jQuery und möchte das von mir hinzugefügte Styling basierend auf dem Eingabewert entfernen:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

Wie kann ich das machen? Beachten Sie, dass die Zeile darüber läuft, wenn eine Farbe mit einem Farbwähler ausgewählt wird (z. B. wenn sich die Maus über einem Farbrad befindet).

Hinweis: Ich kann dies nicht mit css("background-color", "none") machen, da dadurch das Standard-Styling aus den CSS-Dateien entfernt wird. Ich möchte nur den von jQuery hinzugefügten Inline-Stil background-color entfernen.

787
Alex

Das Ändern der Eigenschaft in eine leere Zeichenfolge wird angezeigt, um die Aufgabe auszuführen:

$.css("background-color", "");
1272
anon

Die akzeptierte Antwort funktioniert, hinterlässt jedoch ein leeres style-Attribut im DOM in meinen Tests. Keine große Sache, aber das entfernt alles:

removeAttr( 'style' );

Dies setzt voraus, dass Sie alle dynamischen Formatierungen entfernen und zum Stylesheet-Stil zurückkehren möchten.

513
ThinkingStiff

Es gibt mehrere Möglichkeiten, eine CSS-Eigenschaft mit jQuery zu entfernen:

1. Festlegen der CSS-Eigenschaft auf ihren Standardwert (Anfangswert)

.css("background-color", "transparent")

Siehe Anfangswert für die CSS-Eigenschaft in MDN . Hier ist der Standardwert transparent. Sie können inherit auch für mehrere CSS-Eigenschaften verwenden, um das Attribut von seinem übergeordneten Element zu übernehmen. In CSS3/CSS4 können Sie auch initial , revert oder unset verwenden, diese Browser unterstützen jedoch möglicherweise eine eingeschränkte Unterstützung.

2. Entfernen der CSS-Eigenschaft

Eine leere Zeichenfolge entfernt die CSS-Eigenschaft, d. H.

.css("background-color","")

Beachten Sie jedoch, wie in jQuery .css () documentation angegeben, dies entfernt die Eigenschaft, hat jedoch Kompatibilitätsprobleme mit IE8 für bestimmte CSS-Kurzschreibeigenschaften, einschließlich background.

Festlegen des Werts einer Stileigenschaft auf eine leere Zeichenfolge - z. B. . $ ('# mydiv'). css ('color', '') - entfernt diese Eigenschaft aus einem Element Wenn es bereits direkt angewendet wurde, ob im HTML-Stil Attribut, über die .css () -Methode von jQuery oder über direktes DOM Manipulation der style-Eigenschaft. Es entfernt jedoch keine Stil, der mit einer CSS-Regel in einem Stylesheet oder .__ angewendet wurde. Element. Warnung: Eine bemerkenswerte Ausnahme ist, dass für IE 8 und darunter Wenn Sie eine Abkürzungseigenschaft wie Rahmen oder Hintergrund entfernen, wird Entfernen Sie diesen Stil vollständig aus dem Element, unabhängig davon, was festgelegt ist in einem Stylesheet oder Element.

3. Den gesamten Stil des Elements entfernen

.removeAttr("style")
162
KrisWebDev

Ich habe den Weg gefunden, ein Stilattribut mit reinem JavaScript zu entfernen, um Ihnen den Weg von reinem JavaScript zu zeigen 

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');
45
Marwan

jede dieser jQuery-Funktionen sollte funktionieren:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
16
Mahesh Gaikwad

Dadurch wird das komplette Tag entfernt: 

  $("body").removeAttr("style");
16

Versuche dies:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Vielen Dank

6
uihelp

Wie wäre es mit etwas wie:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}
6
nclu

Nur mit:

$('.tag-class').removeAttr('style');

oder 

$('#tag-id').removeAttr('style');
6

Verwenden Sie mein Plugin: 

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Verwenden Sie es für Ihren Fall wie folgt: 

$(<mySelector>).removeCss();

oder 

$(<mySelector>).removeCss(false);

wenn Sie auch CSS entfernen möchten, das in seinen Klassen definiert ist: 

$(<mySelector>).removeCss(true);
5
Abdennour TOUMI

Wenn Sie einen CSS-Stil verwenden, können Sie Folgendes verwenden:

$("#element").css("background-color","none"); 

und dann ersetzen mit:

$("#element").css("background-color", color);

Wenn Sie keinen CSS-Stil verwenden und Attribute im HTML-Element haben, können Sie Folgendes verwenden:

$("#element").attr("style.background-color",color);
5
Luis
let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))
1
Kamil' Ocean

Warum machen Sie nicht den Stil, den Sie entfernen möchten, um eine CSS-Klasse zu entfernen? Jetzt können Sie verwenden: .removeClass(). Dies eröffnet auch die Möglichkeit der Verwendung von: .toggleClass()

(Entfernen Sie die Klasse, falls vorhanden, und fügen Sie sie hinzu, falls dies nicht der Fall ist.) 

Das Hinzufügen/Entfernen einer Klasse ist auch weniger verwirrend für Änderungen/Problemlösungen bei Layoutproblemen (anstatt zu versuchen herauszufinden, warum ein bestimmter Stil verschwunden ist) 

1
Neil Girardi

Das funktioniert auch !!

$elem.attr('style','');
1
dazzafact

Versuche dies

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');
0
Basant Rules

Simple ist billig in der Webentwicklung. Ich empfehle die Verwendung einer leeren Zeichenfolge beim Entfernen eines bestimmten Stils 

$(element).style.attr = '  ';
0
Victor Michael

2018

dafür gibt es eine native API 

element.style.removeProperty(propery)
0
pery mimon

Dies ist komplexer als einige andere Lösungen, kann jedoch in Szenarien mehr Flexibilität bieten:

1) Erstellen Sie eine Klassendefinition, um das Styling, das Sie anwenden oder entfernen möchten, selektiv zu isolieren (einzukapseln). Es kann leer sein (und für diesen Fall sollte es wahrscheinlich sein):

.myColor {}

2) Verwenden Sie diesen Code basierend auf http://jsfiddle.net/kdp5V/167/ aus dieser Antwort von 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
                }
            }
        }
    }
}

Anwendungsbeispiel: http://jsfiddle.net/qvkwhtow/

Vorsichtsmaßnahmen: 

  • Nicht ausgiebig getestet.
  • ! Important oder andere Anweisungen können nicht in den neuen Wert aufgenommen werden. All diese bestehenden Richtlinien gehen durch diese Manipulation verloren.
  • Nur Änderungen, die beim ersten Auftreten eines styleSelector gefunden wurden. Fügt keine ganzen Stile hinzu oder entfernt sie, aber dies könnte mit etwas aufwendigerem ausgeführt werden.
  • Alle ungültigen/unbrauchbaren Werte werden ignoriert oder werfen einen Fehler.
  • In Chrome (zumindest) werden nicht-lokale (wie in standortübergreifenden) CSS-Regeln nicht durch das document.styleSheets-Objekt verfügbar gemacht, sodass dies für sie nicht funktioniert. Man müsste eine lokale Überschreibung hinzufügen und diese manipulieren, wobei das "zuerst gefundene" Verhalten dieses Codes zu berücksichtigen ist.
  • document.styleSheets ist im Allgemeinen nicht besonders manipulationsfreundlich. Erwarten Sie nicht, dass dies bei aggressivem Einsatz funktioniert.

CSS zu isolieren, ist das, worum es bei CSS geht, auch wenn es nicht manipuliert wird. Bei der Bearbeitung von CSS-Regeln geht es NICHT um jQuery. JQuery bearbeitet DOM-Elemente und verwendet dazu CSS-Selektoren.

0
dkloke