JQuery kullanarak CSS Div'den kaldırma

JQuery'de yeniyim. Benim App ben var:

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

Bir Div'i tıkladığımda, Div'in rengi değiştirilir. Bu Click işlevi içinde bazı işlevlerim var. Tüm bunlardan sonra uygulanan Css Div kaldırmak istiyorum. JQuery'de nasıl yapabilirim?

CSS özelliklerinizi bir sınıfa yerleştirin, ardından böyle bir şey yapın:

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

Sonra 'diğer işlevleriniz' gibi bir şey yapın:

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

Öğe üzerinde bulunan belirli css'yi aşağıdaki gibi kaldırabilirsiniz:

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

Karim ile hemfikir olmama rağmen muhtemelen CSS dersleri kullanmalısınız.

Javascript ile manuel olarak eklediğiniz tüm satır içi stili silmek istiyorsanız removeAttr yöntemini kullanabilirsiniz. CSS sınıflarını kullanmak daha iyidir ama asla bilemezsiniz.

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

Satır içi özellikleri şu şekilde kaldırabilirsiniz:

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

Örneğin:

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

Bu aslında yukarıda belirtilmiştir ve kesinlikle hile yapar.

BTW, bu, animasyondan sonra bir durumu temizlemeniz gerektiğinde faydalıdır. Elbette bununla başa çıkmak için yarım düzine sınıf yazabilirim veya temel sınıfımı kullanabilir ve #id biraz matematik yapabilir ve animasyonun uyguladığı satır içi stili temizleyebilirim.

$(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.

*/

VEYA

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

Not olarak, özelliğe bağlı olarak özelliği otomatik olarak ayarlayabilirsiniz.

Varsayılan değeri ayarlayın, örneğin:

$ (this) .css ("yükseklik", "otomatik");

veya diğer CSS özellikleri için

$ (this) .css ("yükseklik", "devral");

Aslında karmaşık jquery tabanlı stil yapmak zorunda kaldığımda bunu yapmanın en iyi yolu, örneğin, göstermeniz gereken bir modunuz varsa, ancak girmesi gereken doğru parametreleri almak için sayfa ofsetlerini hesaplaması gerekiyor jQuery ("x"). css ({}) işlevi.

İşte stillerin ayarı, çeşitli faktörlere göre hesaplanan değişkenlerin çıktısı.

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

Bu stilleri temizlemek için. gibi bir şey ayarlamak yerine

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

Basit yol

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

Jquery dom üzerindeki öğeleri işlediğinde, stiller "stiller" özniteliğindeki öğeye, stiller satır içi yazıyormuş gibi yazılır. Tek yapmanız gereken bu özelliği temizlemek ve öğenin orijinal stillerine sıfırlanması gerekir

Bu yardımcı olur umarım

ben de aynı prob var, sadece değeri kaldırmak

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

Sınıfları (gerçekten yapmanız gereken) kullanmak istemiyorsanız, istediğinizi gerçekleştirmenin tek yolu önce değişen stilleri kaydetmektir:

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

// set style
// do your thing

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

User147767'nin ikinci çözümünü kullandım

Ancak burada bir yazım hatası var. Olmalı

curCssName.toUpperCase (). indexOf (cssName.toUpperCase () + ':') <0

değil <= 0

Ben de bu koşulu için değiştirdim:

! curCssName.match (yeni RegExp (cssName + "(-. +) ?:"), "mi")

bazen jQuery üzerinden bir css özelliği ekliyoruz ve farklı tarayıcılar için farklı bir şekilde ekleniyor (yani border özelliği Firefox için "border" ve IE için "border-top", "border-bottom" vb. ).

Bir sınıf eklemeden önce sınıfın zaten .hasClass () yöntemiyle sınıfı olup olmadığını kontrol etmelisiniz

Özel sorunuz için. Eşyalarınızı Basamaklı Stil Sayfasına koymalısınız. Tasarım ve işlevselliği ayırmak en iyi uygulamadır.

bu yüzden sınıf isimleri eklemek ve kaldırmak için önerilen çözüm en iyi uygulamadır.

ancak öğeleri manipüle ederken bunların nasıl oluşturulduğunu kontrol edemezsiniz. removeAttr ('style') tüm satır içi stilleri kaldırmanın EN İYİ yoludur.

Ben user147767 değiştirilmiş çözüm mümkün kullanmayı yapmak biraz strings, arraysve objectsgirdi olarak:

/*!
 * 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/