JQueryを使用してDivからCSSを削除する

私はJQueryを初めて使います。私のアプリには次のものがあります：

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

Divをクリックすると、そのDivの色が変わります。そのClick関数内には、実行する機能がいくつかあります。結局、適用されたCssをDivから削除します。JQueryでどうすればよいですか？

CSSプロパティをクラスに入れて、次のようにします。

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

次に、「その他の機能」は次のようになります。

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

次のように、要素にある特定のCSSを削除できます。

$(this).css({'background-color' : '', 'font-weight' : ''});

私はkarimに同意しますが、おそらくCSSクラスを使用する必要があります。

javascriptを使用して手動で追加したすべてのインラインスタイルを削除する場合は、removeAttrメソッドを使用できます。CSSクラスを使用することをお勧めしますが、あなたにはわかりません。

$("#displayPanel div").removeAttr("style")

この方法でインラインプロパティを削除できます。

$(selector).css({'property':'', 'property':''});

例えば：

$(actpar).css({'top':'', 'opacity':''});

これは基本的に上記で説明されており、間違いなくうまくいきます。

ところで、これは、アニメーション後の状態をクリアする必要がある場合などに役立ちます。確かに、これを処理するために6種類のクラスを作成するか、基本クラスと#idを使用していくつかの計算を行い、アニメーションが適用されるインラインスタイルをクリアすることができます。

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

jQuery.fn.extend
({
    removeCss: function(cssName) {
        return this.each(function() {
            var curDom = $(this);
            jQuery.grep(cssName.split(","),
                    function(cssToBeRemoved) {
                        curDom.css(cssToBeRemoved, '');
                    });
            return curDom;
        });
    }
});

/*example code: I prefer JQuery extend so I can use it anywhere I want to use.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //supports comma separated css names.

*/

または

//this parse style & remove style & rebuild style. I like the first one.. but anyway exploring..
jQuery.fn.extend
({
    removeCSS: function(cssName) {
        return this.each(function() {

            return $(this).attr('style',

            jQuery.grep($(this).attr('style').split(";"),
                    function(curCssName) {
                        if (curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

注意として、プロパティによってはautoに設定できる場合があります。

たとえば、デフォルト値を設定します。

$（this）.css（ "height"、 "auto"）;

または他のCSS機能の場合

$（this）.css（ "height"、 "inherit"）;

たとえば、表示する必要があるモーダルがあるが、適切なパラメーターを取得するためにページオフセットを計算する必要がある場合など、複雑なjqueryベースのスタイリングを実行する必要があるときに、実際にこれを行うことがわかった最良の方法jQuery（ "x"）。css（{}）関数。

これがスタイルの設定、さまざまな要因に基づいて計算された変数の出力です。

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

それらのスタイルをクリアするために。のようなものを設定するのではなく

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

簡単な方法は

$(".modal").attr("style", "")

jqueryがdomの要素を操作するとき、スタイルはインラインでスタイルを書き込んでいるかのように、「style」属性の要素に書き込まれます。その属性をクリアするだけで、アイテムは元のスタイルにリセットされます

お役に立てれば

私も同じ問題があります、値を削除してください

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
      function(){$(this).css("background","");});
</script>

クラスを使用したくない場合は（実際に使用する必要があります）、変更するスタイルを最初に保存することで、目的を達成できます。

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

user147767の2番目のソリューションを使用しました

ただし、ここにはタイプミスがあります。そのはず

curCssName.toUpperCase（）。indexOf（cssName.toUpperCase（）+ '：'）<0

0以下ではない

私もこの条件を変更しました：

！curCssName.match（new RegExp（cssName + "（-。+）?:"）、 "mi"）

jQueryにcssプロパティを追加することがあり、ブラウザごとに異なる方法で追加されます（つまり、borderプロパティは、Firefoxの場合は「border」、IEの場合は「border-top」、「border-bottom」などとして追加されます。 ）。

クラスを追加する前に、.hasClass（）メソッドでクラスがすでにあるかどうかを確認する必要があります

特定の質問について。カスケーディングスタイルシートにアイテムを配置する必要があります。デザインと機能を分離することをお勧めします。

そのため、クラス名を追加および削除するという提案されたソリューションがベストプラクティスです。

ただし、要素を操作しているときは、要素のレンダリング方法を制御できません。removeAttr（ 'style'）は、すべてのインラインスタイルを削除する最良の方法です。

私はuser147767の修正ソリューションを使用することを可能にするためにビットをstrings、arraysそしてobjects入力として：

/*!
 * jquery.removecss.js v0.2 - https://stackoverflow.com/a/17196154/1250044
 * Remove multiple properties from an element in your DOM.
 *
 * @author Yannick Albert | #yckart
 * @param {Array|Object|String} css
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/06/19
 **/

$.fn.removeCss = function (css) {
    var properties = [];
    var is = $.type(css);

    if (is === 'array') properties = css;
    if (is === 'object') for (var rule in css) properties.push(rule);
    if (is === 'string') properties = css.replace(/,$/, '').split(',');

    return this.each(function () {
        var $this = $(this);
        $.map(properties, function (prop) {
            $this.css(prop, '');
        });
    });
};

// set some styling
$('body').css({
    color: 'white',
    border: '1px solid red',
    background: 'red'
});

// remove it again
$('body').removeCss('background');
$('body').removeCss(['border']);
$('body').removeCss({
    color: 'white'
});

http://jsfiddle.net/ARTsinn/88mJF/