Apakah mungkin untuk menghapus gaya sebaris dengan jQuery?

Plugin jQuery menerapkan gaya inline ( display:block). Saya merasa malas dan ingin menimpanya display:none.

Apa cara (malas) terbaik?

Pembaruan: sementara solusi berikut berfungsi, ada metode yang jauh lebih mudah. Lihat di bawah.

Inilah yang saya buat, dan saya harap ini berguna - untuk Anda atau orang lain:

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

Ini akan menghapus gaya sebaris itu.

Saya tidak yakin ini yang Anda inginkan. Anda ingin menimpanya, yang, sebagaimana telah ditunjukkan, mudah dilakukan oleh $('#element').css('display', 'inline').

Apa yang saya cari adalah solusi untuk HAPUS gaya inline sepenuhnya. Saya memerlukan ini untuk plugin yang saya tulis di mana saya harus sementara mengatur beberapa nilai CSS inline, tetapi ingin kemudian menghapusnya; Saya ingin stylesheet mengambil kembali kendali. Saya bisa melakukannya dengan menyimpan semua nilai aslinya dan kemudian meletakkannya kembali sejajar, tetapi solusi ini terasa jauh lebih bersih bagi saya.

Ini dia dalam format plugin:

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

Jika Anda memasukkan plugin ini di halaman sebelum skrip Anda, Anda bisa menelepon

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

dan itu harus melakukan trik.

Pembaruan : Saya sekarang menyadari bahwa semua ini sia-sia. Anda cukup mengosongkannya:

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

dan secara otomatis akan dihapus untuk Anda.

Berikut kutipan dari dokumen :

Menyetel nilai properti style ke string kosong - misalnya $('#mydiv').css('color', '')- menghapus properti itu dari elemen jika sudah diterapkan secara langsung, baik dalam atribut gaya HTML, melalui .css()metode jQuery , atau melalui manipulasi DOM langsung dari properti style. Namun, itu tidak menghapus gaya yang telah diterapkan dengan aturan CSS di stylesheet atau <style>elemen.

Saya tidak berpikir jQuery melakukan sihir apa pun di sini; sepertinya styleobjek melakukan ini secara asli .

.removeAttr("style") untuk menghilangkan seluruh tag gaya ...

.attr("style") untuk menguji nilai dan melihat apakah gaya inline ada ...

.attr("style",newValue) untuk mengaturnya ke sesuatu yang lain

Cara termudah untuk menghapus gaya sebaris (dihasilkan oleh jQuery) adalah:

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

Kode sebaris harus menghilang dan objek Anda harus menyesuaikan gaya yang telah ditentukan dalam file CSS Anda.

Bekerja untukku!

Anda dapat mengatur gaya menggunakan cssmetode jQuery :

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

Anda dapat membuat plugin jquery seperti ini:

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

pemakaian

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

Cara Malas (yang akan menyebabkan desainer masa depan mengutuk nama Anda dan membunuh Anda dalam tidur Anda):

#myelement 
{
    display: none !important;
}

Penafian: Saya tidak menganjurkan pendekatan ini, tapi itu pasti cara malas.

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

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

Jika Anda ingin menghapus properti dalam atribut style - tidak hanya mengaturnya ke hal lain - Anda menggunakan removeProperty()metode ini:

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

UPDATE:
Saya telah membuat biola interaktif untuk bermain-main dengan berbagai metode dan hasil mereka. Rupanya, tidak ada banyak perbedaan antara set to empty string, set to faux valuedan removeProperty(). Semuanya menghasilkan fallback yang sama - yang merupakan aturan CSS yang diberikan sebelumnya atau nilai default browser.

Jika tampilan adalah satu-satunya parameter dari gaya Anda, Anda dapat menjalankan perintah ini untuk menghapus semua gaya:

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

Berarti jika elemen Anda terlihat seperti ini sebelumnya:

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

Sekarang elemen Anda akan terlihat seperti ini:

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

Inilah filter pemilih inlineStyle yang saya tulis yang dihubungkan ke jQuery.

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

Dalam kasus Anda, Anda dapat menggunakan ini seperti:

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

Ubah plugin untuk tidak lagi menerapkan gaya. Itu akan jauh lebih baik daripada menghapus gaya sesudahnya.

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

dll ...

Biarkan param 2 kosong!

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

Pada awalnya saya mencoba untuk menghapus gaya inline di css, tetapi tidak berfungsi dan gaya seperti tampilan baru: tidak ada yang akan ditimpa. Tetapi dalam JQuery berfungsi seperti ini.

Saya memiliki masalah serupa dengan properti width. Saya tidak bisa menghapus! Penting dari kode, dan karena itu membutuhkan gaya ini pada template baru saya menambahkan ID (modalstyling) ke elemen dan kemudian saya menambahkan kode berikut ke template:

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