jQueryを使用してインラインスタイルを削除することは可能ですか？

jQueryプラグインはインラインスタイル（display:block）を適用しています。私は怠惰な気持ちで、で上書きしたいと思っていますdisplay:none。

最良の（怠惰な）方法は何ですか？

更新：次の解決策は機能しますが、はるかに簡単な方法があります。下記参照。

ここに私が思いついたものがあり、これがあなたや他の人に役立つことを願っています：

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

これにより、そのインラインスタイルが削除されます。

これがあなたの望んだものかどうかはわかりません。あなたはそれを上書きしたかったのですが、すでに指摘したように、これはによって簡単に実行でき$('#element').css('display', 'inline')ます。

私が探していたのは、インラインスタイルを完全に削除するソリューションでした。インラインCSS値を一時的に設定する必要があるが、後でそれらを削除したい場合、私が書いているプラ​​グインにこれ​​が必要です。スタイルシートに制御を取り戻したい。元の値をすべて保存してインラインに戻すことでそれを行うことができましたが、この解決策は私にはずっとすっきりしています。

ここではプラグイン形式です：

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

このプラグインをスクリプトの前のページに含めると、次のように呼び出すことができます

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

これでうまくいくはずです。

更新：これはすべて無駄であることに気づきました。あなたは単にそれを空白に設定することができます：

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

自動的に削除されます。

これはドキュメントからの引用です：

スタイルプロパティの値を空の文字列に設定します。たとえば$('#mydiv').css('color', '')、HTMLスタイル属性で、jQueryの.css()メソッドを通じて、またはスタイルプロパティの直接DOM操作を通じて直接適用されている場合、要素からそのプロパティを削除します。ただし、スタイルシートまたは<style>要素のCSSルールで適用されたスタイルは削除されません。

ここではjQueryが魔法をかけているとは思いません。そうですstyle、オブジェクトがネイティブにこれを行います。

.removeAttr("style") スタイルタグ全体を取り除くだけです...

.attr("style") 値をテストし、インラインスタイルが存在するかどうかを確認するには...

.attr("style",newValue) それを別のものに設定する

（jQueryによって生成された）インラインスタイルを削除する最も簡単な方法は次のとおりです。

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

インラインコードが消え、オブジェクトがCSSファイルで事前定義されたスタイルに適合するはずです。

私のために働いた！

jQueryのcssメソッドを使用してスタイルを設定できます。

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

次のようなjqueryプラグインを作成できます。

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

使用法

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

怠惰な方法（これにより、将来のデザイナーはあなたの名前を呪い、あなたを眠りに殺します）：

#myelement 
{
    display: none !important;
}

免責事項：私はこのアプローチを推奨しませんが、それは確かに怠惰な方法です。

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

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

スタイル属性内のプロパティを削除したい場合-それを別のものに設定するだけではなく-メソッドを利用しますremoveProperty()：

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

更新：さまざまな方法とその結果をいじる
インタラクティブなフィドルを作成しました。どうやら、そこの差のあまりないですset to empty string、set to faux valueとremoveProperty()。これらはすべて同じフォールバックになります。これは、事前に指定されたCSSルールまたはブラウザーのデフォルト値です。

表示がスタイルの唯一のパラメーターである場合は、次のコマンドを実行してすべてのスタイルを削除できます。

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

要素が以前は次のように見えた場合、

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

これで、要素は次のようになります。

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

以下は、jQueryにプラグインする、私が作成したinlineStyleセレクターフィルターです。

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

あなたの場合、あなたはこれを次のように使うことができます：

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

プラグインを変更して、スタイルを適用しないようにします。それはその後スタイルを削除するよりもはるかに良いでしょう。

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

等...

2番目のパラメーターを空白のままにしてください！

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

最初にCSSでインラインスタイルを削除しようとしましたが、それは機能せず、表示のような新しいスタイル：何も上書きされません。しかし、JQueryでは次のように機能します。

widthプロパティにも同様の問題がありました。コードから！importantを削除できませんでした。新しいテンプレートでこのスタイルが必要なため、要素にID（モーダルスタイル）を追加し、その後、次のコードをテンプレートに追加しました。

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