JQuery ile satır içi stilleri kaldırmak mümkün mü?

Bir jQuery eklentisi satır içi bir stil ( display:block) uyguluyor . Tembel hissediyorum ve bunu geçersiz kılmak istiyorum display:none.

En iyi (tembel) yol nedir?

Güncelleme: aşağıdaki çözüm çalışırken, çok daha kolay bir yöntem var. Aşağıya bakınız.

İşte ben geldim ve umarım bu işe yarar - size veya başka birine:

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

Bu, satır içi stilini kaldıracaktır.

İstediğin bu olduğundan emin değilim. Daha önce de belirtildiği gibi, kolayca yapılabilen onu geçersiz kılmak istediniz $('#element').css('display', 'inline').

Aradığım şey, satır içi stili tamamen KALDIRMAK için bir çözümdü. Ben geçici olarak bazı satır içi CSS değerleri ayarlamak zorunda yazıyorum bir eklenti için bu gerekir, ancak daha sonra bunları kaldırmak istiyorum; Stil sayfasının kontrolü geri almasını istiyorum. Tüm orijinal değerlerini saklayıp sonra tekrar sıraya koyarak bunu yapabilirdim, ama bu çözüm bana çok daha temiz geliyor.

İşte eklenti formatında:

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

Bu eklentiyi komut dosyanızdan önceki sayfaya eklerseniz,

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

ve bu hile yapmalı.

Güncelleme : Şimdi tüm bunların boş olduğunu fark ettim. Sadece boş olarak ayarlayabilirsiniz:

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

ve sizin için otomatik olarak kaldırılır.

İşte dokümanlardan bir alıntı :

Bir style özelliğinin değerinin boş bir dizeye ayarlanması (ör. $('#mydiv').css('color', '')- HTML stili özelliğinde, jQuery'nin .css()yöntemi yoluyla veya style özelliğinin doğrudan DOM manipülasyonu yoluyla doğrudan uygulanmışsa, bu özelliği bir öğeden kaldırır . Ancak, bir stil sayfasında veya <style>öğesinde CSS kuralı ile uygulanan bir stili kaldırmaz .

JQuery'nin burada sihir yaptığını sanmıyorum; nesne bunu doğal olarak yapıyor gibi görünüyorstyle .

.removeAttr("style") tüm stil etiketinden kurtulmak için ...

.attr("style") değeri test etmek ve bir satır içi stilin var olup olmadığını görmek için ...

.attr("style",newValue) başka bir şeye ayarlamak için

Satır içi stilleri (jQuery tarafından oluşturulan) kaldırmanın en kolay yolu:

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

Satır içi kod kaybolmalı ve nesneniz CSS dosyalarınızda önceden tanımlanmış stili uyarlamalıdır.

Benim için çalıştı!

Stili jQuery'nin cssyöntemini kullanarak ayarlayabilirsiniz :

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

bunun gibi bir jquery eklentisi oluşturabilirsiniz:

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

kullanım

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

Tembel yol (gelecekteki tasarımcıların adınızı lanetlemesine ve uykunuzda sizi öldürmesine neden olacak):

#myelement 
{
    display: none !important;
}

Feragatname: Bu yaklaşımı savunmuyorum, ama kesinlikle tembel bir yol.

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

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

Bir stil özniteliğindeki bir özelliği kaldırmak istiyorsanız - yalnızca başka bir şeye ayarlamakla kalmaz - removeProperty()yöntemi kullanırsınız:

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

GÜNCELLEME: Farklı yöntemler ve sonuçlarıyla oynamak
için etkileşimli bir keman yaptım . Görünüşe göre, orada arasındaki farkın çok değil set to empty string, set to faux valueve removeProperty(). Bunların tümü, önceden verilen bir CSS kuralı veya tarayıcının varsayılan değeri olan aynı yedekle sonuçlanır.

Ekranın stilinizden tek parametre olması durumunda, tüm stili kaldırmak için bu komutu çalıştırabilirsiniz:

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

Öğeniz daha önce böyle görünüyorsa:

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

Şimdi elementiniz şöyle görünecek:

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

İşte ben jQuery bu fişler yazdı inlineStyle seçici filtre .

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

Sizin durumunuzda bunu şöyle kullanabilirsiniz:

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

Eklentiyi artık stili uygulamayacak şekilde değiştirin. Bu, oradaki stili kaldırmaktan çok daha iyi olurdu.

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

vb...

2. parametreyi boş bırakın!

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

İlk başta css'deki satır içi stili kaldırmaya çalıştım, ancak çalışmıyor ve ekran gibi yeni bir stil yok: hiçbirinin üzerine yazılmayacak. Ancak JQuery'de böyle çalışır.

Width özelliği ile benzer bir sorun vardı. Önemli! Koddan kaldıramadım ve yeni bir şablonda bu stile ihtiyaç duyduğumdan öğeye bir Id (modalstyling) ekledim ve daha sonra şablona aşağıdaki kodu ekledim:

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