web-dev-qa-db-ja.com

どうやって.css（）関数で追加されたスタイルを削除することができますか？

私はjQueryでCSSを変更しています、そして私は入力値に基づいて追加しているスタイルを削除したいです。

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

これどうやってするの？カラーピッカーを使用して色が選択されるたびに（つまり、マウスがカラーホイール上を移動するとき）、上の行が実行されることに注意してください。

2番目の注意：css("background-color", "none")では、CSSファイルからデフォルトのスタイル設定が削除されるため、これを行うことはできません。 jQueryによって追加されたbackground-colorインラインスタイルを削除したいだけです。

javascriptjquerycss
806
Alex

プロパティを空の文字列に変更すると、その仕事をしているように見えます。

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

1230
anon

受け入れられた答え は動作するが、私のテストではDOM上に空のstyle属性を残す大したことはありませんが、これですべてが削除されます。

removeAttr( 'style' );

これは、すべての動的スタイル設定を削除してスタイルシートスタイル設定に戻ることを前提としています。

513
ThinkingStiff

JQueryを使ってCSSプロパティを削除する方法はいくつかあります。

1. CSSプロパティをデフォルト値（初期値）に設定 

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

MDNのCSSプロパティの 初期値を参照してください 。ここでのデフォルト値はtransparentです。いくつかのCSSプロパティに inherit を使用して、その親から属性を継承することもできます。 CSS3/CSS4では、 initial 、 revert 、または unset も使用できますが、これらのキーワードではブラウザのサポートが制限される場合があります。

2. CSSプロパティを削除する

空の文字列はCSSプロパティを削除します。

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

しかし、 jQuery .css（）ドキュメント で指定されているように、これはプロパティを削除しますが、 background を含む特定のCSS短縮プロパティに関してIE8との互換性の問題があります。

スタイルプロパティの値を空の文字列、例えば $（ '＃mydiv'）。css（ 'color'、 ''）に設定すると、そのプロパティが要素から削除されます。 HTMLのstyle 属性、jQueryの.css（）メソッド、またはstyleプロパティの直接DOM 操作を通じて、すでに直接適用されています。ただし、スタイルシートまたは要素内のCSSルールで適用されているスタイルは削除されません。警告： 1つの注目すべき例外は、IE 8以下の場合、 borderやbackgroundなどの省略形のプロパティを削除するとその要素からそのスタイルが完全に削除されることですスタイルシートや要素に何が設定されているかに関わらず 。

3.要素のスタイル全体を削除する 

.removeAttr("style")
162
KrisWebDev

純粋なJavaScriptのスタイルを知らせるために、純粋なJavaScriptでスタイル属性を削除する方法があります。 

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

これらのjQuery関数はどちらも機能するはずです。

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

これは完全なタグを削除します。 

  $("body").removeAttr("style");
16
SURJEET SINGH Bisht

これを試して：

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

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

ありがとう

6
uihelp

次のようなものはどうですか。

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

ただ使用する：

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

または 

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

私のプラグインを使う： 

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

あなたの場合は、次のように使用してください。 

$(<mySelector>).removeCss();

または 

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

そのクラスで定義されているCSSも削除したい場合は、 

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

あなたがCSSスタイルを使うならば、あなたは使うことができます：

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

それから次のものに置き換えます。

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

CSSスタイルを使用せず、HTML要素に属性がある場合は、次のようにします。

$("#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

CSSクラスを削除したいスタイルを作りませんか？これで.removeClass()を使えます。 これにより、次のものを使用する可能性も開けます。.toggleClass()

（存在する場合はクラスを削除し、存在しない場合は追加します。） 

クラスを追加/削除しても、レイアウトの問題に対処するときに変更/トラブルシューティングを行うのに混乱が少なくなります（特定のスタイルが消えた理由を見つけようとするのとは対照的に）。 

1
Neil Girardi

これも動作します！

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

これを試して

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

シンプルはWeb開発において安価です。特定のスタイルを削除するときは、空の文字列を使用することをお勧めします。 

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

2018年

そのためのネイティブAPIがあります 

element.style.removeProperty(propery)
0
pery mimon

これは他のソリューションよりも複雑ですが、シナリオの柔軟性が向上する可能性があります。

1）適用/削除したいスタイルを選択的に分離（カプセル化）するクラス定義を作成します。それは空にすることができます（そしてこの場合、おそらくそうなるはずです）：

.myColor {}

2） http://jsfiddle.net/kdp5V/167/に基づいて、このコードを使用してください から この回答 / - 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
                }
            }
        }
    }
}

使用例： http://jsfiddle.net/qvkwhtow/ /

警告： 

  • 十分にテストされていません。
  • ！important または他の指令を新しい値に含めることはできません。このような既存の指令はこの操作によって失われます。
  • 最初に見つかったstyleSelectorの出現のみが変更されます。スタイル全体を追加または削除しませんが、これはもっと手の込んだもので行うことができます。
  • 無効または使用できない値は無視されるか、エラーが発生します。
  • Chromeでは（少なくとも）、ローカルではない（クロスサイトのように）CSSルールはdocument.styleSheetsオブジェクトを通して公開されていないので、これは機能しません。このコードの「最初に見つかった」動作を念頭に置いて、ローカルのオーバーライドを追加して操作する必要があります。
  • document.styleSheetsは、一般的な操作には特に向いていません。これが積極的な使用に役立つとは思わないでください。

このようにスタイリングを分離することは、CSSを操作することではなくても、CSSのすべてのことです。 jQueryがDOMの要素を操作し、それを実行するためにCSSセレクターを使用するのは、CSSルールを操作することだけではありません。

0
dkloke