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

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

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

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

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

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

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

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

Вы можете удалить конкретный css, который находится на элементе следующим образом:

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

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

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

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

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

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

Например:

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

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

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

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

  

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

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

Если вы не хотите использовать classы (что вам действительно нужно), единственный способ выполнить то, что вы хотите, – сначала сохранить изменяющиеся стили:

 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, и оно добавляется по-разному для разных браузеров (т. е. свойство границы будет добавлено как «граница» для Firefox, а также «border-top», «border-bottom» и т. д. для IE ).

Перед добавлением classа вы должны проверить, был ли у него уже class с методом .hasClass ()

По вашему конкретному вопросу. Вы должны помещать свои вещи в Cascading Stylesheet. Лучше всего отделять дизайн и функциональность.

поэтому предлагаемое решение по добавлению и удалению имен classов является наилучшей практикой.

однако, когда вы управляете элементами, вы не контролируете их визуализацию. 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/

  • Вложенная подкритерия jqgrid subgrid 4-го уровня всегда возвращает первый rowid подсерии
  • Различать прокрутку вверх / вниз в jquery?
  • Передача параметров на идентификатор страницы в jQuery Mobile
  • css width: calc (100% -100px); альтернатива с использованием jquery
  • Конфигурация поиска виджета jQuery UI Autocomplete
  • Отображать данные JSON в таблице HTML
  • Как получить текстовый узел элемента?
  • Ошибка «Нет транспорта» w / jQuery ajax-вызов в IE
  • jQuery прокручивает до ID с другой страницы
  • Передача сложных объектов в службу restа WCF
  • Получить список отмеченных флажков в div с помощью jQuery
  • Давайте будем гением компьютера.