ลบ CSS จาก Div โดยใช้ JQuery

ฉันใหม่กับ JQuery ในแอพของฉันฉันมีดังต่อไปนี้:

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

เมื่อฉันคลิกที่ Div สีของ Div นั้นจะเปลี่ยนไป ภายในฟังก์ชั่นคลิกฉันมีฟังก์ชั่นที่ต้องทำ หลังจากทั้งหมดที่ฉันต้องการลบ Css ที่ใช้จาก Div ฉันจะทำใน JQuery ได้อย่างไร

ใส่คุณสมบัติ CSS ของคุณลงในคลาสจากนั้นทำสิ่งนี้:

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

จากนั้นที่ 'ฟังก์ชันการทำงานอื่น' ของคุณทำสิ่งที่ชอบ:

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

คุณสามารถลบ CSS เฉพาะที่อยู่ในองค์ประกอบดังนี้:

$(this).css({'background-color' : '', 'font-weight' : ''});

แม้ว่าฉันจะเห็นด้วยกับ karim ว่าคุณควรจะใช้คลาส CSS

คุณสามารถใช้เมธอด removeAttr หากคุณต้องการลบสไตล์อินไลน์ทั้งหมดที่คุณเพิ่มด้วยตนเองด้วย javascript มันเป็นการดีกว่าที่จะใช้คลาส CSS แต่คุณไม่เคยรู้

$("#displayPanel div").removeAttr("style")

คุณสามารถลบคุณสมบัติแบบอินไลน์ด้วยวิธีนี้:

$(selector).css({'property':'', 'property':''});

ตัวอย่างเช่น:

$(actpar).css({'top':'', 'opacity':''});

นี่เป็นหลักที่กล่าวถึงข้างต้นและแน่นอนมันหลอกลวง

BTW นี้มีประโยชน์ในกรณีเช่นเมื่อคุณต้องการล้างสถานะหลังจากภาพเคลื่อนไหว แน่ใจว่าฉันสามารถเขียนคลาสครึ่งโหลเพื่อจัดการกับเรื่องนี้หรือฉันสามารถใช้คลาสฐานของฉันและ #id ทำคณิตศาสตร์และล้างสไตล์อินไลน์ที่ใช้ภาพเคลื่อนไหว

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

jQuery.fn.extend
({
    removeCss: function(cssName) {
        return this.each(function() {
            var curDom = $(this);
            jQuery.grep(cssName.split(","),
                    function(cssToBeRemoved) {
                        curDom.css(cssToBeRemoved, '');
                    });
            return curDom;
        });
    }
});

/*example code: I prefer JQuery extend so I can use it anywhere I want to use.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //supports comma separated css names.

*/

หรือ

//this parse style & remove style & rebuild style. I like the first one.. but anyway exploring..
jQuery.fn.extend
({
    removeCSS: function(cssName) {
        return this.each(function() {

            return $(this).attr('style',

            jQuery.grep($(this).attr('style').split(";"),
                    function(curCssName) {
                        if (curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

โปรดทราบว่าคุณอาจตั้งค่าเป็นอัตโนมัติได้ขึ้นอยู่กับคุณสมบัติ

ตั้งค่าเริ่มต้นตัวอย่างเช่น:

$ (นี่) .css ("ความสูง", "อัตโนมัติ");

หรือในกรณีของคุณสมบัติ CSS อื่น ๆ

$ (นี่) .css ("ความสูง", "สืบทอด");

จริง ๆ แล้ววิธีที่ดีที่สุดที่ฉันได้พบเมื่อทำสไตล์ jquery based ที่ซับซ้อนเช่นถ้าคุณมี modal ที่คุณต้องการแสดง แต่มันจำเป็นต้องคำนวณ offsets หน้าเพื่อให้ได้พารามิเตอร์ที่ถูกต้องที่พวกเขาต้องเข้าไป ฟังก์ชัน a jQuery ("x"). css ({})

ดังนั้นนี่คือการตั้งค่าของรูปแบบผลลัพธ์ของตัวแปรที่คำนวณจากปัจจัยต่าง ๆ

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

เพื่อที่จะเคลียร์สไตล์เหล่านั้น แทนที่จะตั้งสิ่งที่ต้องการ

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

วิธีง่ายๆก็คือ

$(".modal").attr("style", "")

เมื่อ jquery จัดการกับองค์ประกอบบน dom สไตล์จะถูกเขียนไปยังองค์ประกอบในแอตทริบิวต์ "style" ราวกับว่าคุณกำลังเขียนสไตล์อินไลน์ สิ่งที่คุณต้องทำคือการล้างแอททริบิวต์และไอเท็มควรรีเซ็ตเป็นสไตล์ดั้งเดิม

หวังว่านี่จะช่วยได้

ฉันมีปัญหาเดียวกันเหมือนกันเพียงแค่ลบค่า

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
      function(){$(this).css("background","");});
</script>

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

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

ฉันใช้โซลูชันที่สองของ user147767

อย่างไรก็ตามมีการพิมพ์ผิดที่นี่ มันควรจะเป็น

curCssName.toUpperCase (). indexOf (cssName.toUpperCase () + ':') <0

ไม่ใช่ <= 0

ฉันยังเปลี่ยนเงื่อนไขนี้เป็น:

! curCssName.match (RegExp ใหม่ (cssName + "(-. +) ?:"), "mi")

บางครั้งเราเพิ่มคุณสมบัติ css บน jQuery และมันถูกเพิ่มในวิธีที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกัน (เช่นคุณสมบัติชายแดนจะถูกเพิ่มเป็น "border" สำหรับ Firefox และ "border-top", "border-bottom" ฯลฯ สำหรับ IE )

ก่อนที่จะเพิ่มคลาสคุณควรตรวจสอบว่าคลาสนั้นมีเมธอด. hasClass () อยู่หรือไม่

สำหรับคำถามเฉพาะของคุณ คุณควรใส่สิ่งของใน Cascading Stylesheet เป็นวิธีปฏิบัติที่ดีที่สุดในการแยกการออกแบบและฟังก์ชันการทำงานออก

ดังนั้นทางออกที่เสนอของการเพิ่มและลบชื่อชั้นเรียนเป็นวิธีปฏิบัติที่ดีที่สุด

อย่างไรก็ตามเมื่อคุณจัดการองค์ประกอบคุณไม่ได้ควบคุมวิธีการแสดงผล removeAttr ('style') เป็นวิธีที่ดีที่สุดในการลบรูปแบบอินไลน์ทั้งหมด

ฉันแก้ไขโซลูชันของ user147767 เล็กน้อยเพื่อให้สามารถใช้งานstringsได้arraysและobjectsเป็นอินพุต:

/*!
 * jquery.removecss.js v0.2 - https://stackoverflow.com/a/17196154/1250044
 * Remove multiple properties from an element in your DOM.
 *
 * @author Yannick Albert | #yckart
 * @param {Array|Object|String} css
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/06/19
 **/

$.fn.removeCss = function (css) {
    var properties = [];
    var is = $.type(css);

    if (is === 'array') properties = css;
    if (is === 'object') for (var rule in css) properties.push(rule);
    if (is === 'string') properties = css.replace(/,$/, '').split(',');

    return this.each(function () {
        var $this = $(this);
        $.map(properties, function (prop) {
            $this.css(prop, '');
        });
    });
};

// set some styling
$('body').css({
    color: 'white',
    border: '1px solid red',
    background: 'red'
});

// remove it again
$('body').removeCss('background');
$('body').removeCss(['border']);
$('body').removeCss({
    color: 'white'
});

http://jsfiddle.net/ARTsinn/88mJF/