Est-il possible de supprimer des styles en ligne avec jQuery?

Un plugin jQuery applique un style en ligne ( display:block). Je me sens paresseux et je veux passer outre display:none.

Quelle est la meilleure façon (paresseuse)?

Mise à jour: bien que la solution suivante fonctionne, il existe une méthode beaucoup plus simple. Voir ci-dessous.

Voici ce que j'ai trouvé, et j'espère que cela vous sera utile - pour vous ou quelqu'un d'autre:

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

Cela supprimera ce style en ligne.

Je ne suis pas sûr que ce soit ce que tu voulais. Vous vouliez le remplacer, ce qui, comme déjà souligné, est facilement réalisé par $('#element').css('display', 'inline').

Ce que je cherchais, c'était une solution pour SUPPRIMER complètement le style en ligne. J'en ai besoin pour un plugin que j'écris où je dois temporairement définir certaines valeurs CSS en ligne, mais je veux les supprimer plus tard; Je veux que la feuille de style reprenne le contrôle. Je pourrais le faire en stockant toutes ses valeurs d'origine, puis en les remettant en ligne, mais cette solution me semble beaucoup plus propre.

Le voici au format plugin:

(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));

Si vous incluez ce plugin dans la page avant votre script, vous pouvez alors simplement appeler

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

et cela devrait faire l'affaire.

Mise à jour : j'ai maintenant réalisé que tout cela était inutile. Vous pouvez simplement le mettre à blanc:

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

et il sera automatiquement supprimé pour vous.

Voici une citation des documents :

Définir la valeur d'une propriété de style sur une chaîne vide - par exemple $('#mydiv').css('color', '')- supprime cette propriété d'un élément si elle a déjà été directement appliquée, que ce soit dans l'attribut de style HTML, via la .css()méthode de jQuery ou via la manipulation DOM directe de la propriété de style. Cependant, il ne supprime pas un style qui a été appliqué avec une règle CSS dans une feuille de style ou un <style>élément.

Je ne pense pas que jQuery fasse de la magie ici; il semble que l' styleobjet le fasse nativement .

.removeAttr("style") pour se débarrasser de la balise de style entière ...

.attr("style") pour tester la valeur et voir si un style en ligne existe ...

.attr("style",newValue) pour le régler sur autre chose

La façon la plus simple de supprimer des styles en ligne (générés par jQuery) serait:

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

Le code en ligne devrait disparaître et votre objet devrait adapter le style prédéfini dans vos fichiers CSS.

A travaillé pour moi!

Vous pouvez définir le style en utilisant la cssméthode de jQuery :

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

vous pouvez créer un plugin jquery comme celui-ci:

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]);
        });
    };
})();

usage

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

La manière paresseuse (qui incitera les futurs designers à maudire votre nom et à vous assassiner dans votre sommeil):

#myelement 
{
    display: none !important;
}

Avertissement: je ne préconise pas cette approche, mais c'est certainement la voie paresseuse.

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

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

Si vous souhaitez supprimer une propriété dans un attribut de style - pas simplement la définir sur autre chose - vous utilisez la removeProperty()méthode:

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

MISE À JOUR:
J'ai créé un violon interactif pour jouer avec les différentes méthodes et leurs résultats. Apparemment, il n'y a pas beaucoup de différence entre set to empty string, set to faux valueet removeProperty(). Ils entraînent tous le même repli - qui est soit une règle CSS pré-donnée, soit la valeur par défaut du navigateur.

Dans le cas où l'affichage est le seul paramètre de votre style, vous pouvez exécuter cette commande afin de supprimer tout style:

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

Signifie que si votre élément ressemblait à ceci auparavant:

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

Maintenant, votre élément ressemblera à ceci:

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

Voici un filtre de sélection inlineStyle que j'ai écrit qui se branche sur jQuery.

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

Dans votre cas, vous pouvez utiliser ceci comme:

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

Modifiez le plugin pour ne plus appliquer le style. Ce serait bien mieux que de supprimer le style par la suite.

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

etc...

Laissez simplement le 2e param vide!

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

Au début, j'ai essayé de supprimer le style en ligne dans CSS, mais cela ne fonctionne pas et un nouveau style comme l'affichage: aucun ne sera écrasé. Mais dans JQuery cela fonctionne comme ça.

J'ai eu un problème similaire avec la propriété width. Je ne pouvais pas supprimer le! Important du code, et comme il avait besoin de ce style sur un nouveau modèle, j'ai ajouté un identifiant (modalstyling) à l'élément et ensuite j'ai ajouté le code suivant au modèle:

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