Удалить CSS из Div с помощью JQuery

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

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

Когда я нажимаю на Div, цвет этого Div меняется. В рамках этой функции Click у меня есть некоторые функции, которые нужно сделать. После всего этого я хочу удалить примененный 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' : ''});

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

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

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

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

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

Например:

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

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

Кстати, это полезно в тех случаях, когда вам нужно очистить состояние после анимации. Конечно, я мог бы написать с полдюжины классов, чтобы справиться с этим, или я мог бы использовать свой базовый класс и #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(";"));
        });
    }
});

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

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

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

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

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

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

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

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

<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 будет добавлено как «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/