Ist es möglich, Inline-Stile mit jQuery zu entfernen?

Ein jQuery-Plugin wendet einen Inline-Stil an (display:block ). Ich fühle mich faul und möchte es überschreiben display:none.

Was ist der beste (faule) Weg?

Update: Während die folgende Lösung funktioniert, gibt es eine viel einfachere Methode. Siehe unten.

Folgendes habe ich mir ausgedacht, und ich hoffe, dass dies nützlich ist - für Sie oder andere:

$('#element').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

Dadurch wird dieser Inline-Stil entfernt.

Ich bin mir nicht sicher, ob du das wolltest. Sie wollten es überschreiben, was, wie bereits erwähnt, leicht von erledigt werden kann$('#element').css('display', 'inline') .

Was ich suchte, war eine Lösung, um den Inline-Stil vollständig zu entfernen. Ich benötige dies für ein Plugin, das ich schreibe und in dem ich vorübergehend einige Inline-CSS-Werte festlegen muss, diese aber später entfernen möchte. Ich möchte, dass das Stylesheet die Kontrolle zurückerhält. Ich könnte es tun, indem ich alle ursprünglichen Werte speichere und sie dann wieder inline setze, aber diese Lösung fühlt sich für mich viel sauberer an.

Hier ist es im Plugin-Format:

(function($)
{
    $.fn.removeStyle = function(style)
    {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function()
        {
            $(this).attr('style', function(i, style)
            {
                return style && style.replace(search, '');
            });
        });
    };
}(jQuery));

Wenn Sie dieses Plugin vor Ihrem Skript in die Seite aufnehmen, können Sie es einfach aufrufen

$('#element').removeStyle('display');

und das sollte den Trick machen.

Update : Mir wurde jetzt klar, dass dies alles zwecklos ist. Sie können es einfach auf leer setzen:

$('#element').css('display', '');

und es wird automatisch für Sie entfernt.

Hier ist ein Zitat aus den Dokumenten :

Durch Festlegen des Werts einer Stileigenschaft auf eine leere Zeichenfolge - z. B. $('#mydiv').css('color', '')- wird diese Eigenschaft aus einem Element entfernt, wenn sie bereits direkt angewendet wurde, sei es im HTML-Stilattribut, über die .css()Methode von jQuery oder durch direkte DOM-Manipulation der Stileigenschaft. Ein Stil, der mit einer CSS-Regel in einem Stylesheet oder <style>Element angewendet wurde, wird jedoch nicht entfernt .

Ich glaube nicht, dass jQuery hier etwas mag. es scheint, dass das styleObjekt dies nativ tut .

.removeAttr("style") um einfach den ganzen Style-Tag loszuwerden ...

.attr("style") um den Wert zu testen und festzustellen, ob ein Inline-Stil vorhanden ist ...

.attr("style",newValue) um es auf etwas anderes zu setzen

Der einfachste Weg, Inline-Stile (von jQuery generiert) zu entfernen, ist:

$(this).attr("style", "");

Der Inline-Code sollte verschwinden und Ihr Objekt sollte den in Ihren CSS-Dateien vordefinierten Stil anpassen.

Hat für mich gearbeitet!

Sie können den Stil mit der cssMethode von jQuery festlegen :

$('something:visible').css('display', 'none');

Sie können ein jquery-Plugin wie folgt erstellen:

jQuery.fn.removeInlineCss = (function(){
    var rootStyle = document.documentElement.style;
    var remover = 
        rootStyle.removeProperty    // modern browser
        || rootStyle.removeAttribute   // old browser (ie 6-8)
    return function removeInlineCss(properties){
        if(properties == null)
            return this.removeAttr('style');
        proporties = properties.split(/\s+/);
        return this.each(function(){
            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style, proporties[i]);
        });
    };
})();

Verwendung

$(".foo").removeInlineCss(); //remove all inline styles
$(".foo").removeInlineCss("display"); //remove one inline style
$(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles

Der faule Weg (der dazu führen wird, dass zukünftige Designer Ihren Namen verfluchen und Sie im Schlaf ermorden):

#myelement 
{
    display: none !important;
}

Haftungsausschluss: Ich befürworte diesen Ansatz nicht, aber es ist sicherlich der faule Weg.

$('div[style*=block]').removeAttr('style');

$("[style*=block]").hide();

Wenn Sie eine Eigenschaft innerhalb eines Stilattributs entfernen und nicht nur auf etwas anderes setzen möchten, verwenden Sie die folgende removeProperty()Methode:

document.getElementById('element').style.removeProperty('display');

UPDATE:
Ich habe eine interaktive Geige erstellt , um mit den verschiedenen Methoden und ihren Ergebnissen herumzuspielen. Offenbar gibt es nicht viel Unterschied zwischen set to empty string, set to faux valueund removeProperty(). Sie alle führen zu demselben Fallback - dies ist entweder eine vorgegebene CSS-Regel oder der Standardwert des Browsers.

Falls die Anzeige der einzige Parameter in Ihrem Stil ist, können Sie diesen Befehl ausführen, um alle Stile zu entfernen:

$('#element').attr('style','');

Bedeutet, dass, wenn Ihr Element zuvor so aussah:

<input id="element" style="display: block;">

Jetzt sieht Ihr Element folgendermaßen aus:

<input id="element" style="">

Hier ist ein InlineStyle-Auswahlfilter, den ich geschrieben habe und der in jQuery integriert wird.

$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set

In Ihrem Fall könnten Sie dies wie folgt verwenden:

$("div:inlineStyle(display:block)").hide();

Ändern Sie das Plugin so, dass der Stil nicht mehr angewendet wird. Das wäre viel besser, als den Stil danach zu entfernen.

$el.css({ height : '', 'margin-top' : '' });

etc...

Lass einfach den 2. Parameter leer!

$("#element").css({ display: "none" });

Zuerst habe ich versucht, den Inline-Stil in CSS zu entfernen, aber es funktioniert nicht und ein neuer Stil wie die Anzeige: Keiner wird überschrieben. Aber in JQuery funktioniert es so.

Ich hatte ein ähnliches Problem mit der Eigenschaft width. Ich konnte das! Wichtige nicht aus dem Code entfernen, und da es diesen Stil für eine neue Vorlage benötigte, fügte ich dem Element eine ID (Modalstyling) hinzu und fügte anschließend der Vorlage folgenden Code hinzu:

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>