Удалить CSS из Div, используя JQuery

Question

Я новичок в JQuery. В моем приложении у меня есть следующее:

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

Когда я нажимаю на Div, цвет этого Div изменяется. В рамках этой функции Click у меня есть некоторые функции, которые нужно сделать. После всего этого я хочу удалить примененный Css из Div. Как я могу сделать это в JQuery?

Answer 1

Вы можете удалить определенный CSS, который находится на элементе, как это:

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

Хотя я согласен с Каримом, что вы, вероятно, должны использовать классы CSS.

Answer 2

Вы можете использовать метод removeAttr, если вы хотите удалить все встроенные стили, которые вы добавили вручную с помощью javascript. Лучше использовать классы CSS, но вы никогда не знаете.

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

Answer 3

Поместите свои CSS-свойства в класс, затем сделайте что-то вроде этого:

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

Тогда где ваши «другие функции» делают что-то вроде:

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

Answer 4

Вы можете удалить встроенные свойства следующим образом:

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

Например:

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

Это, по сути, упомянуто выше, и это определенно помогает.

Кстати, это полезно в тех случаях, когда вам нужно очистить состояние после анимации. Конечно, я мог бы написать с полдюжины классов, чтобы справиться с этим, или я мог бы использовать свой базовый класс и #id сделать некоторую математику и очистить встроенный стиль, который применяет анимация.

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

Answer 5

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.

*/

OR

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

Answer 6

Как примечание, в зависимости от свойства вы можете установить его в автоматический режим.

Answer 7

Установите значение по умолчанию, например:

$ (this) .css ("высота", "авто");

или в случае других функций CSS

$ (this) .css ("высота", "наследовать");

Answer 8

На самом деле лучший способ, который я нашел, это сделать при необходимости выполнять сложные стили на основе jquery, например, если у вас есть модал, который вам нужно отобразить, но он должен рассчитать смещения страниц, чтобы получить правильные параметры, которые понадобятся перейти в функцию 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", как если бы вы писали стили inline. Все, что вам нужно сделать, это очистить этот атрибут, и элемент должен восстановить свои первоначальные стили

Надеюсь, это поможет

Answer 9

У меня тоже такая же проблема, просто удалите значение

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

Answer 10

Я использовал второе решение user147767

Однако здесь есть опечатка. Должно быть

curCssName.toUpperCase (). IndexOf (cssName.toUpperCase () + ':') <0 </p>

не <= 0 </p>

Я также изменил это условие для:

! CurCssName.match (новый RegExp (cssName + "(-. +) ?:"), "ми")

как иногда мы добавляем свойство css поверх jQuery, и оно добавляется по-разному для разных браузеров (т. Е. Свойство border будет добавлено как «border» для Firefox и «border-top», «border-bottom») и т. д. для IE).