Bagaimana saya bisa menghapus style yang ditambahkan dengan .css() function?

Mengubah properti untuk string kosong muncul untuk melakukan pekerjaan:

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

Jawaban yang diterima karya-karya, tapi daun yang kosong gaya atribut pada DOM di tes saya. Bukan masalah besar, tapi ini menghilangkan itu semua:

removeAttr( 'style' );

Ini mengasumsikan anda ingin menghapus semua styling dinamis dan kembali ke stylesheet styling.

Ada beberapa cara untuk menghapus CSS properti menggunakan jQuery:

1. Pengaturan CSS properti untuk default (awal) nilai

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

Lihat nilai awal untuk CSS properti di MDN. Di sini nilai default adalah transparan. Anda juga dapat menggunakan mewarisi untuk beberapa properti CSS untuk inherite atribut dari induknya. Dalam CSS3/CSS4, anda juga dapat menggunakan awal, kembali atau hapus tapi kata kunci ini mungkin memiliki keterbatasan dukungan browser.

2. Menghapus CSS properti

String kosong menghilangkan CSS properti, yaitu

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

Tapi hati-hati, seperti yang ditentukan dalam jQuery .css() dokumentasi, hal ini menghilangkan properti tetapi memiliki masalah kompatibilitas dengan IE8 tertentu CSS shorthand properti, termasuk latar belakang.

Pengaturan nilai properti gaya ke string kosong — mis. $('#mydiv').css('warna', '') — menghapus properti dari elemen jika sudah langsung diterapkan, baik dalam gaya HTML atribut, melalui jQuery's .css() metode, atau melalui langsung DOM manipulasi gaya properti. Itu tidak, bagaimanapun, menghapus gaya yang telah diterapkan dengan aturan dalam CSS stylesheet atau elemen. Peringatan: salah satu pengecualian adalah bahwa, untuk IE 8 dan di bawah ini, menghilangkan singkatan properti seperti perbatasan atau latar belakang akan hapus gaya yang sepenuhnya dari unsur, terlepas dari apa yang diatur dalam stylesheet atau elemen.

3. Menghapus seluruh gaya elemen

.removeAttr("style")

Saya punya cara untuk menghapus atribut style dengan JavaScript murni hanya untuk membiarkan anda tahu cara yang murni JavaScript

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

Ini akan menghapus tag lengkap :

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

salah satu dari fungsi jQuery harus bekerja:

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

Hanya menggunakan:

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

atau

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

Bagaimana tentang sesuatu seperti:

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

Coba ini:

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

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

Terima kasih

Menggunakan Plugin :

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

Untuk kasus anda ,Menggunakannya sebagai berikut :

$().removeCss();

atau

$().removeCss(false);

jika anda ingin menghapus juga CSS didefinisikan dalam kelas-kelas :

$().removeCss(true);

Jika anda menggunakan gaya CSS, anda dapat menggunakan:

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

dan kemudian ganti dengan:

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

Jika anda don't menggunakan gaya CSS dan anda memiliki atribut dalam elemen HTML, anda dapat menggunakan:

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

Dua ribu delapan belas

ada API asli untuk yang

element.style.removeProperty(propery)

Mengapa tidak membuat gaya yang anda inginkan untuk menghapus kelas CSS? Sekarang anda dapat menggunakan: .removeClass(). Ini juga membuka kemungkinan menggunakan: .toggleClass()

(menghapus kelas jika itu's hadir, dan menambahkan jika itu's tidak.)

Menambahkan / menghapus kelas juga kurang membingungkan untuk mengubah / memecahkan masalah ketika berhadapan dengan masalah tata letak (sebagai lawan untuk mencoba untuk mencari tahu mengapa gaya tertentu menghilang.)

Yang satu ini juga kerja!!

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

Coba Ini

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

Ini lebih kompleks dari beberapa solusi lain, tapi mungkin menawarkan lebih banyak fleksibilitas dalam skenario:

1. Membuat definisi kelas untuk mengisolasi (merangkum) gaya yang anda inginkan untuk menerapkan/menghapus selektif. Hal ini dapat kosong (dan untuk kasus ini, mungkin harus):

.myColor {}

2. gunakan kode ini, berdasarkan http://jsfiddle.net/kdp5V/167/ dari ini answer oleh 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
                }
            }
        }
    }
}

Contoh penggunaan: http://jsfiddle.net/qvkwhtow/

Peringatan:

• Tidak diuji secara luas.
• Bisa't termasuk !penting atau petunjuk lainnya dalam nilai baru. Setiap ada perintah yang akan hilang melalui manipulasi ini.
• Hanya perubahan pertama ditemukan terjadinya styleSelector. Doesn't menambahkan atau menghapus seluruh gaya, tapi hal ini bisa dilakukan dengan sesuatu yang lebih rumit.
• Apa pun yang tidak valid/tidak dapat digunakan nilai-nilai akan diabaikan atau melempar kesalahan.
• Di Chrome (setidaknya), non-lokal (seperti dalam cross-site) aturan CSS yang tidak terkena melalui dokumen.stylesheet objek, jadi ini tidak't bekerja pada mereka. Satu harus menambahkan menimpa lokal dan memanipulasi itu, menjaga dalam pikiran "pertama ditemukan" perilaku dari kode ini.
• dokumen.stylesheet tidak terlalu ramah untuk manipulasi secara umum, don't berharap ini bekerja untuk penggunaan agresif.

Mengisolasi styling cara ini adalah apa yang CSS adalah semua tentang, bahkan jika memanipulasi isn't. Memanipulasi aturan CSS TIDAK apa jQuery adalah semua tentang, jQuery memanipulasi elemen DOM, dan menggunakan CSS untuk melakukan itu.

Sederhana murah di pengembangan web. Saya sarankan menggunakan string kosong ketika menghapus sebuah gaya tertentu

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