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.
Das Ändern der Eigenschaft in eine leere Zeichenfolge wird angezeigt, um die Aufgabe auszuführen:
$.css("background-color", "");
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.
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")
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');
jede dieser jQuery-Funktionen sollte funktionieren:
$("#element").removeAttr("style");
$("#element").removeAttr("background-color")
Dadurch wird das komplette Tag entfernt:
$("body").removeAttr("style");
Versuche dies:
$('#divID').css({"background":"none"});// remove existing
$('#divID').css({"background":"#bada55"});// add new color here.
Vielen Dank
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);
}
Nur mit:
$('.tag-class').removeAttr('style');
oder
$('#tag-id').removeAttr('style');
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);
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);
let el = document.querySelector(element)
let styles = el.getAttribute('style')
el.setAttribute('style', styles.replace('width: 100%', ''))
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)
Das funktioniert auch !!
$elem.attr('style','');
Versuche dies
$(".ClassName").css('color','');
Or
$("#Idname").css('color','');
Simple ist billig in der Webentwicklung. Ich empfehle die Verwendung einer leeren Zeichenfolge beim Entfernen eines bestimmten Stils
$(element).style.attr = ' ';
2018
dafür gibt es eine native API
element.style.removeProperty(propery)
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:
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.