Я новичок в 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( "height", "inherit" );
У меня тоже такая же проблема, просто удалите значение
<script>
$("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
function(){$(this).css("background","");});
</script>
На самом деле лучший способ, который я нашел для этого, когда мне приходится делать сложный стиль на основе 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. Все, что вам нужно сделать, - это очистить этот атрибут, а элемент должен reset к его оригинальным стилям
Надеюсь, что это поможет
Если вы не хотите использовать классы (что вам действительно нужно), единственный способ выполнить то, что вы хотите, - сначала сохранить изменяющиеся стили:
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).
Перед добавлением класса вы должны проверить, был ли у него уже класс с методом .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'
});