Usuń CSS z Div za pomocą JQuery

Jestem nowy w JQuery. W mojej aplikacji mam:

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

Kiedy klikam element DIV, kolor tego elementu DIV ulega zmianie. W ramach tej funkcji Click mam kilka funkcji do wykonania. Po tym wszystkim chcę usunąć zastosowany CSS z Div. Jak mogłem to zrobić w JQuery?

Umieść swoje właściwości CSS w klasie, a następnie zrób coś takiego:

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

Następnie, gdzie są twoje `` inne funkcje '', zrób coś takiego:

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

Możesz usunąć określony plik CSS znajdujący się w elemencie w następujący sposób:

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

Chociaż zgadzam się z karimem, prawdopodobnie powinieneś używać klas CSS.

Możesz użyć metody removeAttr, jeśli chcesz usunąć cały styl wbudowany dodany ręcznie za pomocą javascript. Lepiej jest używać klas CSS, ale nigdy nie wiadomo.

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

Możesz usunąć właściwości wbudowane w ten sposób:

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

Na przykład:

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

Jest to zasadniczo wspomniane powyżej i zdecydowanie pomaga.

BTW, jest to przydatne w sytuacjach, gdy trzeba wyczyścić stan po animacji. Jasne, mógłbym napisać pół tuzina klas, aby sobie z tym poradzić, lub użyć mojej klasy bazowej i #id zrobić trochę matematyki i wyczyścić styl wbudowany, którego dotyczy animacja.

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

*/

LUB

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

Uwaga: w zależności od właściwości możesz ustawić ją na auto.

Ustaw wartość domyślną, na przykład:

$ (this) .css ("wysokość", "auto");

lub w przypadku innych funkcji CSS

$ (this) .css ("wysokość", "dziedziczenie");

Właściwie to najlepszy sposób, jaki znalazłem, aby to zrobić, gdy muszę robić złożone stylizacje oparte na jquery, na przykład, jeśli masz modal, który musisz wyświetlić, ale musi obliczyć przesunięcia stron, aby uzyskać prawidłowe parametry, które będą musiały przejść funkcja a jQuery ("x"). css ({}).

Oto ustawienie stylów, wynik zmiennych obliczonych na podstawie różnych czynników.

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

Aby usunąć te style. zamiast ustawiać coś podobnego

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

Byłby prosty sposób

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

Kiedy jquery manipuluje elementami w domenie, style są zapisywane do elementu w atrybucie „style”, tak jakbyś pisał style w tekście. Wszystko, co musisz zrobić, to wyczyścić ten atrybut, a przedmiot powinien zresetować się do swoich oryginalnych stylów

Mam nadzieję że to pomoże

mam ten sam problem, po prostu usuń wartość

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

Jeśli nie chcesz używać klas (co naprawdę powinieneś), jedynym sposobem na osiągnięcie tego, co chcesz, jest zapisanie najpierw zmienianych stylów:

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

// set style
// do your thing

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

Użyłem drugiego rozwiązania user147767

Jednak jest tu literówka. Powinno być

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

nie <= 0

Zmieniłem również ten warunek dla:

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

ponieważ czasami dodajemy właściwość css przez jQuery i dodajemy ją w inny sposób dla różnych przeglądarek (np. właściwość border zostanie dodana jako „border” dla przeglądarki Firefox i „border-top”, „border-bottom” itp. dla IE ).

Przed dodaniem klasy należy sprawdzić, czy ma ona już klasę z metodą .hasClass ()

Na Twoje konkretne pytanie. Powinieneś umieścić swoje rzeczy w Cascading Stylesheet. Najlepszą praktyką jest oddzielenie projektu od funkcjonalności.

więc proponowane rozwiązanie dodawania i usuwania nazw klas jest najlepszą praktyką.

jednak kiedy manipulujesz elementami, nie masz kontroli nad sposobem ich renderowania. removeAttr ('style') to NAJLEPSZY sposób na usunięcie wszystkich wbudowanych stylów.

I zmodyfikowane user147767 męska rozwiązanie trochę, aby go można użyć strings, arraysa objectsjako dane wejściowe:

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