Видаліть 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' : ''});

Хоча я погоджуюся з karim, що ви, ймовірно, повинні використовувати класи 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" так, як ніби ви писали стилі в рядку. Все, що вам потрібно зробити - це очистити цей атрибут і елемент слід відновити до його початкових стилів

Сподіваюся, це допомагає

У мене теж проблема, просто видаліть значення

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

Я використовував друге рішення користувача147767

Однак тут є друкарська помилка. Вона повинна бути

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

не <= 0

Я також змінив цю умову для:

! curCssName.match (новий RegExp (cssName + "(-. +) ?:"), "mi")

як іноді ми додаємо властивість css через jQuery, і вона додається по-різному для різних браузерів (тобто властивість border буде додана як "border" для Firefox, а "border-top", "border-top" тощо для IE ).

Перед додаванням класу слід перевірити, чи в ньому вже був клас методом .hasClass ()

Для вашого конкретного питання. Ви повинні помістити свої речі в каскадний таблицю стилів. Найкраща практика розділяти дизайн та функціональність.

тому запропоноване рішення додавання та видалення назв класів є найкращою практикою.

проте, коли ви маніпулюєте елементами, ви не контролюєте, як вони відображаються. 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/