.Css () işleviyle eklenen bir stili nasıl kaldırabilirim?

Ben değiştireceğim CSS ile jQuery ve ben girdi değerine dayalı ekliyorum stil kaldırmak istediğiniz:

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

Bunu nasıl yapabilirim?
Yukarıdaki çizginin, bir renk seçici kullanılarak bir renk seçildiğinde (yani fare bir renk tekerleğinin üzerine geldiğinde) çalıştığını unutmayın.

2. not: Bunu yapamıyorum css("background-color", "none")çünkü CSS dosyalarından varsayılan stili kaldıracak .
Sadece jQuerybackground-color tarafından eklenen satır içi stilini kaldırmak istiyorum .

Özelliğin boş bir dizeye değiştirilmesi, işi yapıyor gibi görünüyor:

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

Kabul edilen cevap çalışıyor ancak styletestlerimde DOM'da boş bir özellik bırakıyor . Önemli değil, ama bu her şeyi kaldırıyor:

removeAttr( 'style' );

Bu, tüm dinamik stilleri kaldırmak ve stil sayfası stiline geri dönmek istediğinizi varsayar.

JQuery kullanarak bir CSS özelliğini kaldırmanın birkaç yolu vardır:

1. CSS özelliğinin varsayılan (başlangıç) değerine ayarlanması

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

MDN'deki CSS özelliği için başlangıç ​​değerine bakın . Burada varsayılan değer şudur transparent. inheritÖzelliği üst öğesinden devralmak için birkaç CSS özelliği için de kullanabilirsiniz . CSS3 / CSS4, ayrıca kullanabilir initial, revertya da unsetancak bu anahtar kelimeler sınırlı tarayıcı desteğine sahip olabilir.

2. CSS özelliğinin kaldırılması

Boş bir dize, CSS özelliğini kaldırır;

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

Ancak, jQuery .css () belgelerinde belirtildiği gibi , bu özelliği kaldırır, ancak arka plan da dahil olmak üzere belirli CSS kısayol özellikleri için IE8 ile uyumluluk sorunları vardır .

Bir stil özelliğinin değerini boş bir dizeye ayarlamak - ör. $ ('# Mydiv'). Css ('color', '') - HTML stilinde olsun, önceden uygulanmışsa bu özelliği bir öğeden kaldırır özniteliği, jQuery'nin .css () yöntemiyle veya style özelliğinin doğrudan DOM işlemi aracılığıyla. Ancak, bir stil sayfasında veya öğesinde CSS kuralı ile uygulanan bir stili kaldırmaz. Uyarı: Dikkate değer bir istisna, IE 8 ve altı için kenarlık veya arka plan gibi steno özelliklerin kaldırılmasının, stil sayfasında veya öğesinde ayarlanandan bağımsız olarak bu stili tamamen öğeden kaldıracağıdır .

3. elemanın tüm tarzı Çıkarma

.removeAttr("style")

Sadece saf JavaScript'in yolunu bilmenizi sağlamak için saf JavaScript ile bir stil niteliğini kaldırmanın yolunu buldum

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

Bu, etiketin tamamını kaldıracak:

  $("body").removeAttr("style");

bu jQuery işlevlerinden herhangi birinin çalışması gerekir:

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

Sadece şunu kullanarak:

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

veya

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

Nasıl bir şey hakkında:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Eklentimi kullan:

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

Durumunuz için aşağıdaki gibi kullanın:

$(<mySelector>).removeCss();

veya

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

sınıflarında tanımlanan CSS'yi de kaldırmak istiyorsanız:

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

Bunu dene:

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

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

Teşekkürler

CSS stilini kullanıyorsanız şunları kullanabilirsiniz:

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

ve ardından aşağıdakilerle değiştirin:

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

CSS stilini kullanmıyorsanız ve HTML öğesinde özelliğiniz varsa şunları kullanabilirsiniz:

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

2018

bunun için yerel API var

element.style.removeProperty(propery)

Bu da işe yarıyor !!

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

Neden bir CSS sınıfını kaldırmak istediğiniz stili oluşturmuyorsunuz? Şimdi kullanabilirsiniz: .removeClass(). Bu ayrıca aşağıdakileri kullanma olasılığını da açar:.toggleClass()

(varsa sınıfı kaldırın ve yoksa ekleyin.)

Sınıf eklemek / kaldırmak, mizanpaj sorunları ile uğraşırken değiştirmek / sorun gidermek için daha az kafa karıştırıcıdır (belirli bir stilin neden kaybolduğunu anlamaya çalışmak yerine).

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Bu, diğer bazı çözümlerden daha karmaşıktır, ancak senaryolarda daha fazla esneklik sunabilir:

1) Seçerek uygulamak / kaldırmak istediğiniz stili izole etmek (kapsüllemek) için bir sınıf tanımı yapın. Boş olabilir (ve bu durumda muhtemelen olması gerekir):

.myColor {}

2) dayalı bu kodu kullanabilirsiniz http://jsfiddle.net/kdp5V/167/ gelen bu cevap ile 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
                }
            }
        }
    }
}

Kullanım örneği: http://jsfiddle.net/qvkwhtow/

Uyarılar:

• Kapsamlı olarak test edilmemiştir.
• Önemli veya diğer yönergeleri yeni değere dahil edemezsiniz . Bu tür mevcut direktifler bu manipülasyon sayesinde kaybedilecektir.
• Yalnızca bir styleSelector öğesinin ilk bulunuşunu değiştirir. Tüm stilleri eklemez veya kaldırmaz, ancak bu daha ayrıntılı bir şeyle yapılabilir.
• Geçersiz / kullanılamaz değerler dikkate alınmaz veya hata verir.
• Chrome'da (en azından), yerel olmayan (siteler arası gibi) CSS kuralları document.styleSheets nesnesi aracılığıyla gösterilmez, bu nedenle bunlar üzerinde çalışmaz. Bu kodun "ilk bulunan" davranışını göz önünde bulundurarak, bir yerel geçersiz kılmaları eklemek ve değiştirmek gerekir.
• document.styleSheets genel olarak manipülasyona uygun değildir, bunun agresif kullanım için çalışmasını beklemeyin.

Stili bu şekilde izole etmek, manipüle etmese bile CSS'nin temelini oluşturur. CSS kurallarını değiştirmek jQuery'nin tümüyle ilgili DEĞİLDİR, jQuery DOM öğelerini manipüle eder ve bunu yapmak için CSS seçicileri kullanır.

Basit web geliştirme ucuzdur. Belirli bir stili kaldırırken boş dize kullanmanızı öneririm

$(element).style.attr = '  ';

Bunu dene

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