Bagaimana saya bisa menghapus gaya yang ditambahkan dengan fungsi .css ()?

Saya mengubah CSS dengan jQuery dan saya ingin menghapus gaya yang saya tambahkan berdasarkan nilai input:

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

Bagaimana saya bisa melakukan ini?
Perhatikan bahwa garis di atas berjalan setiap kali warna dipilih menggunakan color picker (mis. Ketika mouse bergerak di atas roda warna).

Catatan kedua: Saya tidak bisa melakukan ini dengan css("background-color", "none")karena itu akan menghapus styling default dari file CSS .
Saya hanya ingin menghapus background-colorgaya sebaris yang ditambahkan oleh jQuery .

Mengubah properti ke string kosong tampaknya melakukan pekerjaan:

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

Jawaban yang diterima berfungsi tetapi meninggalkan styleatribut kosong pada DOM dalam pengujian saya. Bukan masalah besar, tetapi ini menghapus semuanya:

removeAttr( 'style' );

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

Ada beberapa cara untuk menghapus properti CSS menggunakan jQuery:

1. Mengatur properti CSS ke nilai default (awal)

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

Lihat nilai awal untuk properti CSS di MDN . Di sini nilai standarnya transparent. Anda juga dapat menggunakan inheritbeberapa properti CSS untuk mewarisi atribut dari induknya. Di CSS3 / CSS4, Anda juga dapat menggunakan initial, revertatau unsettetapi kata kunci ini mungkin memiliki dukungan browser yang terbatas.

2. Menghapus properti CSS

String kosong menghapus properti CSS, yaitu

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

Namun berhati-hatilah, seperti yang ditentukan dalam dokumentasi jQuery .css () , ini menghapus properti tetapi memiliki masalah kompatibilitas dengan IE8 untuk properti steno CSS tertentu, termasuk latar belakang .

Menyetel nilai properti style ke string kosong - mis. $ ('# Mydiv'). Css ('color', '') - menghapus properti itu dari elemen jika sudah diterapkan secara langsung, baik dalam gaya HTML atribut, melalui metode .css () jQuery, atau melalui manipulasi DOM langsung dari properti style. Namun, itu tidak menghapus gaya yang telah diterapkan dengan aturan CSS di stylesheet atau elemen. Peringatan: satu pengecualian penting adalah bahwa, untuk IE 8 dan di bawahnya, menghapus properti singkatan seperti perbatasan atau latar belakang akan menghapus gaya itu sepenuhnya dari elemen, terlepas dari apa yang diatur dalam stylesheet atau elemen .

3. Menghapus seluruh gaya elemen

.removeAttr("style")

Saya punya cara untuk menghapus atribut gaya dengan JavaScript murni hanya agar Anda tahu cara JavaScript murni

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 ini harus berfungsi:

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

Hanya menggunakan:

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

atau

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

Bagaimana dengan 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);
}

Gunakan Plugin saya:

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

Untuk kasus Anda, Gunakan sebagai berikut:

$(<mySelector>).removeCss();

atau

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

jika Anda ingin menghapus juga CSS yang ditentukan di kelasnya:

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

Coba ini:

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

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

Terima kasih

Jika Anda menggunakan gaya CSS, Anda dapat menggunakan:

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

lalu ganti dengan:

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

Jika Anda tidak menggunakan gaya CSS dan memiliki atribut dalam elemen HTML, Anda dapat menggunakan:

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

2018

ada API asli untuk itu

element.style.removeProperty(propery)

Yang ini juga berfungsi !!

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

Mengapa tidak membuat gaya yang ingin Anda hapus dari kelas CSS? Sekarang Anda dapat menggunakan:.removeClass() . Ini juga membuka kemungkinan menggunakan:.toggleClass()

(hapus kelas jika ada, dan tambahkan jika tidak.)

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

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

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

Ini lebih kompleks daripada beberapa solusi lain, tetapi mungkin menawarkan lebih banyak fleksibilitas dalam skenario:

1) Buat definisi kelas untuk mengisolasi (merangkum) gaya yang ingin Anda terapkan / hapus secara selektif. Itu bisa kosong (dan untuk kasus ini, mungkin harus):

.myColor {}

2) gunakan kode ini, berdasarkan http://jsfiddle.net/kdp5V/167/ dari jawaban ini 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 ekstensif.
• Tidak dapat menyertakan ! Arahan penting atau lainnya dalam nilai baru. Arahan yang ada seperti itu akan hilang melalui manipulasi ini.
• Hanya perubahan yang pertama kali ditemukan kemunculan styleSelector. Tidak menambah atau menghapus seluruh gaya, tetapi ini bisa dilakukan dengan sesuatu yang lebih rumit.
• Nilai yang tidak valid / tidak dapat digunakan akan diabaikan atau melempar kesalahan.
• Di Chrome (setidaknya), aturan CSS non-lokal (seperti di situs) tidak diekspos melalui objek document.styleSheets, jadi ini tidak akan berfungsi pada mereka. Orang harus menambahkan override lokal dan memanipulasi itu, dengan mengingat perilaku "pertama kali ditemukan" dari kode ini.
• document.styleSheets tidak terlalu ramah untuk manipulasi secara umum, jangan berharap ini bekerja untuk penggunaan yang agresif.

Mengisolasi gaya dengan cara ini adalah tentang apa itu CSS, bahkan jika memanipulasi bukan. Memanipulasi aturan CSS BUKAN tentang jQuery, jQuery memanipulasi elemen DOM, dan menggunakan penyeleksi CSS untuk melakukannya.

Sederhana murah dalam pengembangan web. Saya sarankan menggunakan string kosong saat menghapus gaya tertentu

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

Coba ini

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