ฉันจะลบสไตล์ที่เพิ่มด้วยฟังก์ชัน. css () ได้อย่างไร

ฉันกำลังเปลี่ยนCSSด้วยjQueryและฉันต้องการลบสไตล์ที่ฉันเพิ่มตามค่าอินพุต:

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

ฉันจะทำสิ่งนี้ได้อย่างไร
โปรดทราบว่าบรรทัดด้านบนจะทำงานเมื่อใดก็ตามที่มีการเลือกสีโดยใช้เครื่องมือเลือกสี (เช่นเมื่อเมาส์เคลื่อนที่เหนือวงล้อสี)

หมายเหตุที่สอง: ฉันไม่สามารถทำได้css("background-color", "none")เนื่องจากจะลบการกำหนดค่าเริ่มต้นออกจากไฟล์CSS
ผมแค่อยากจะเอาbackground-colorรูปแบบอินไลน์ที่เพิ่มขึ้นโดยjQuery

การเปลี่ยนคุณสมบัติเป็นสตริงว่างจะปรากฏขึ้นเพื่อทำงาน:

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

คำตอบที่ได้รับการยอมรับใช้งานได้ แต่ปล่อยให้styleแอตทริบิวต์ที่ว่างเปล่าใน DOM ในการทดสอบของฉัน ไม่ใช่เรื่องใหญ่ แต่นี่เป็นการลบทั้งหมด:

removeAttr( 'style' );

สิ่งนี้จะถือว่าคุณต้องการลบการจัดแต่งทรงผมแบบไดนามิกทั้งหมดและกลับไปที่การจัดแต่งสไตล์ชีต

มีหลายวิธีในการลบคุณสมบัติ CSS โดยใช้ jQuery:

1. การตั้งค่าคุณสมบัติ CSS เป็นค่าเริ่มต้น (เริ่มต้น)

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

ดูค่าเริ่มต้นสำหรับ CSS ทรัพย์สินที่ MDN transparentที่นี่คุ้มค่าเริ่มต้นคือ คุณยังสามารถใช้inheritสำหรับคุณสมบัติ CSS หลายอย่างเพื่อสืบทอดแอตทริบิวต์จากพาเรนต์ ใน CSS3 / CSS4 คุณยังอาจจะใช้initial, revertหรือunsetแต่คำเหล่านี้อาจมีการสนับสนุนเบราว์เซอร์ จำกัด

2. การลบคุณสมบัติ CSS

สตริงว่างลบคุณสมบัติ CSS เช่น

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

แต่ระวังตามที่ระบุในjQuery .css) เอกสาร (นี้เอาทรัพย์สิน แต่ก็มีปัญหาที่เข้ากันได้กับ IE8 สำหรับคุณสมบัติของ CSS ชวเลขบางอย่างรวมถึงพื้นหลัง

การตั้งค่าของคุณสมบัติสไตล์เป็นสตริงว่าง - เช่น $ ('# mydiv'). css ('color', '') - ลบคุณสมบัตินั้นออกจากองค์ประกอบถ้ามันถูกนำไปใช้โดยตรงไม่ว่าจะเป็นสไตล์ HTML คุณลักษณะผ่านวิธี. css () ของ jQuery หรือผ่านการจัดการ DOM โดยตรงของคุณสมบัติสไตล์ อย่างไรก็ตามจะไม่ลบสไตล์ที่ใช้กับกฎ CSS ในสไตล์ชีทหรือองค์ประกอบ คำเตือน: หนึ่งที่น่าสังเกตก็คือว่าสำหรับ IE 8 และด้านล่างเอาคุณสมบัติชวเลขเช่นชายแดนหรือพื้นหลังจะเอาสไตล์ที่ทั้งหมดจากองค์ประกอบโดยไม่คำนึงถึงสิ่งที่ตั้งอยู่ในสไตล์หรือองค์ประกอบ

3. การลบสไตล์ทั้งหมดขององค์ประกอบ

.removeAttr("style")

ฉันมีวิธีลบแอตทริบิวต์สไตล์ด้วย JavaScript ที่บริสุทธิ์เพื่อแจ้งให้คุณทราบวิธีการใช้ JavaScript ที่บริสุทธิ์

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

สิ่งนี้จะลบแท็กทั้งหมด:

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

ฟังก์ชัน jQuery เหล่านี้ควรทำงาน:

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

เพียงแค่ใช้:

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

หรือ

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

เกี่ยวกับสิ่งที่ชอบ:

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

ใช้ปลั๊กอินของฉัน:

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

สำหรับกรณีของคุณใช้ดังต่อไปนี้:

$(<mySelector>).removeCss();

หรือ

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

ถ้าคุณต้องการลบ CSS ที่กำหนดในคลาสด้วย:

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

ลองสิ่งนี้:

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

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

ขอบคุณ

หากคุณใช้สไตล์ CSS คุณสามารถใช้:

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

แล้วแทนที่ด้วย:

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

หากคุณไม่ได้ใช้สไตล์ CSS และคุณมีคุณสมบัติในองค์ประกอบ HTML คุณสามารถใช้:

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

2018

มี API ดั้งเดิมสำหรับสิ่งนั้น

element.style.removeProperty(propery)

อันนี้ใช้ได้อีกด้วย !!

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

ทำไมไม่สร้างสไตล์ที่คุณต้องการลบคลาส CSS? ตอนนี้คุณสามารถใช้: .removeClass(). สิ่งนี้จะเปิดโอกาสในการใช้:.toggleClass()

(ลบคลาสถ้ามีอยู่และเพิ่มถ้าไม่ได้)

การเพิ่ม / ลบคลาสนั้นยังทำให้สับสนน้อยลงในการเปลี่ยน / แก้ไขปัญหาเมื่อจัดการกับปัญหาการจัดวาง

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

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

สิ่งนี้ซับซ้อนกว่าโซลูชันอื่น ๆ แต่อาจมอบความยืดหยุ่นในสถานการณ์:

1) สร้างนิยามคลาสเพื่อแยก (แค็ปซูล) สไตล์ที่คุณต้องการใช้ / ลบโดยเลือก อาจว่างเปล่า (และสำหรับกรณีนี้อาจเป็น):

.myColor {}

2) ใช้รหัสนี้ตามhttp://jsfiddle.net/kdp5V/167/จากคำตอบนี้ โดย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
                }
            }
        }
    }
}

ตัวอย่างการใช้งาน: http://jsfiddle.net/qvkwhtow/

คำเตือน:

• ไม่ผ่านการทดสอบอย่างกว้างขวาง
• ไม่สามารถรวม! สำคัญหรือคำสั่งอื่น ๆ ในค่าใหม่ คำสั่งที่มีอยู่เช่นนี้จะหายไปจากการจัดการนี้
• การเปลี่ยนแปลงแรกเท่านั้นที่พบการเกิดขึ้นของ styleSelector ไม่ได้เพิ่มหรือลบสไตล์ทั้งหมด แต่สามารถทำได้ด้วยสิ่งที่ซับซ้อนกว่านี้
• ค่าที่ไม่ถูกต้อง / ใช้ไม่ได้จะถูกละเว้นหรือผิดพลาด
• ใน Chrome (อย่างน้อย) กฎ CSS แบบไม่ใช้งานในเครื่อง หนึ่งจะต้องเพิ่มการแทนที่ท้องถิ่นและจัดการที่โดยคำนึงถึงพฤติกรรม "พบครั้งแรก" ของรหัสนี้
• document.styleSheets ไม่เป็นมิตรกับการจัดการโดยทั่วไปอย่าคาดหวังว่าสิ่งนี้จะใช้งานได้ในเชิงรุก

การแยกการจัดแต่งทรงผมด้วยวิธีนี้คือสิ่งที่เป็นเรื่องเกี่ยวกับ CSS แม้ว่าจะไม่ได้จัดการอะไรก็ตาม การจัดการกฎ CSS ไม่ใช่สิ่งที่ jQuery เป็นเรื่องเกี่ยวกับ jQuery ใช้งานองค์ประกอบ DOM และใช้ตัวเลือก CSS เพื่อทำ

ง่าย ๆ มีราคาถูกในการพัฒนาเว็บ ฉันขอแนะนำให้ใช้สตริงว่างเมื่อลบสไตล์เฉพาะ

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

ลองสิ่งนี้

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