Hapus CSS dari Div menggunakan JQuery

Saya baru mengenal JQuery. Di Aplikasi saya, saya memiliki yang berikut ini:

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

Ketika saya mengklik Div, warna Div itu berubah. Di dalam fungsi Klik itu saya memiliki beberapa fungsi yang harus dilakukan. Setelah semua itu saya ingin menghapus Css yang diterapkan dari Div. Bagaimana saya bisa melakukannya di JQuery?

Masukkan properti CSS Anda ke dalam kelas, lalu lakukan sesuatu seperti ini:

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

Lalu di mana 'fungsi lain' Anda melakukan sesuatu seperti:

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

Anda dapat menghapus css tertentu yang ada di elemen seperti ini:

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

Meskipun saya setuju dengan karim bahwa Anda mungkin harus menggunakan kelas CSS.

Anda bisa menggunakan metode removeAttr, jika Anda ingin menghapus semua gaya inline yang Anda tambahkan secara manual dengan javascript. Lebih baik menggunakan kelas CSS tetapi Anda tidak pernah tahu.

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

Anda dapat menghapus properti sebaris dengan cara ini:

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

Sebagai contoh:

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

Ini pada dasarnya disebutkan di atas, dan pasti berhasil.

BTW, ini berguna dalam kasus seperti ketika Anda perlu menghapus status setelah animasi. Tentu saya bisa menulis setengah lusin kelas untuk menangani ini, atau saya bisa menggunakan kelas dasar saya dan #id melakukan beberapa matematika, dan menghapus gaya sebaris yang diterapkan animasi.

$(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.

*/

ATAU

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

Sebagai catatan, tergantung pada properti Anda mungkin dapat mengaturnya ke otomatis.

Tetapkan nilai default, misalnya:

$ (ini) .css ("height", "auto");

atau dalam hal fitur CSS lainnya

$ (ini) .css ("height", "inherit");

Sebenarnya cara terbaik yang saya temukan untuk melakukan ini ketika harus melakukan styling berbasis jquery kompleks, misalnya, jika Anda memiliki modal yang perlu Anda tampilkan tetapi perlu menghitung offset halaman untuk mendapatkan parameter yang benar yang perlu dimasukkan ke dalam fungsi a jQuery ("x"). css ({}).

Jadi di sini adalah pengaturan gaya, output dari variabel yang dihitung berdasarkan berbagai faktor.

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

Untuk menghapus gaya-gaya itu. daripada mengatur sesuatu seperti

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

Cara sederhananya

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

Ketika jquery memanipulasi elemen pada dom, style ditulis ke elemen dalam atribut "style" seolah-olah Anda sedang menulis style inline. Yang harus Anda lakukan adalah menghapus atribut itu dan item tersebut harus diatur ulang ke gaya aslinya

Semoga ini membantu

saya punya masalah yang sama juga, cukup hapus nilai

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

Jika Anda tidak ingin menggunakan kelas (yang memang harus Anda lakukan), satu-satunya cara untuk mencapai apa yang Anda inginkan adalah dengan menyimpan gaya perubahan terlebih dahulu:

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

// set style
// do your thing

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

Saya menggunakan solusi kedua dari user147767

Namun, ada salah ketik di sini. Harus

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

bukan <= 0

Saya juga mengubah kondisi ini untuk:

! curCssName.match (RegExp baru (cssName + "(-. +) ?:"), "mi")

seperti kadang-kadang kita menambahkan properti css di atas jQuery, dan itu ditambahkan dengan cara yang berbeda untuk browser yang berbeda (yaitu properti perbatasan akan ditambahkan sebagai "perbatasan" untuk Firefox, dan "batas atas", "batas bawah" dll untuk IE ).

Sebelum menambahkan kelas Anda harus memeriksa apakah sudah ada kelas dengan metode .hasClass ()

Untuk pertanyaan spesifik Anda. Anda harus meletakkan barang-barang Anda di Cascading Stylesheet. Ini praktik terbaik untuk memisahkan desain dan fungsionalitas.

jadi solusi yang diusulkan untuk menambah dan menghapus nama kelas adalah praktik terbaik.

namun ketika Anda memanipulasi elemen, Anda tidak bisa mengontrol bagaimana elemen itu diberikan. removeAttr ('style') adalah cara TERBAIK untuk menghapus semua gaya inline.

Saya memodifikasi solusi user147767 sedikit agar memungkinkan untuk digunakan strings, arraysdan objectssebagai input:

/*!
 * 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/