I'm new to JQuery. In my App I have the following:
$("#displayPanel div").live("click", function(){
$(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});
When I click on a Div, the color of that Div is changed. Within that Click function I have some functionalities to do. After all that I want to remove the applied Css from the Div. How could I do it in JQuery?
Before adding a class you should check if it already had class with .hasClass() method
For your specific question. You should be putting your stuff in Cascading Stylesheet. It's best practice to separate design and functionality.
so the proposed solution of adding and removing class names is best practice.
however when you are manipulating elements you don't control of how they are rendered. removeAttr('style') is BEST way to remove all inline styles.
As a note, depending upon the property you may be able to set it to auto.
I modified user147767's solution a bit to make it possible to use strings, arrays and objects as input:
/*!
* 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'
});
You can remove inline properties this way:
$(selector).css({'property':'', 'property':''});
For example:
$(actpar).css({'top':'', 'opacity':''});
This is essentially mentioned above, and it definitely does the trick.
BTW, this is useful in instances such as when you need to clear a state after animation. Sure I could write a half dozen classes to deal with this, or I could use my base class and #id do some math, and clear the inline style that the animation applies.
$(actpar).animate({top:0, opacity:1, duration:500}, function() {
$(this).css({'top':'', 'opacity':''});
});
You can remove specific css that is on the element like this:
$(this).css({'background-color' : '', 'font-weight' : ''});
Although I agree with karim that you should probably be using CSS classes.
i have same prob too, just remove the value
<script>
$("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
function(){$(this).css("background","");});
</script>
I used the second solution of user147767
However, there is a typo here. It should be
curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') < 0
not <= 0
I also changed this condition for:
!curCssName.match(new RegExp(cssName + "(-.+)?:"), "mi")
as sometimes we add a css property over jQuery, and it's added in a different way for different browsers (i.e. the border property will be added as "border" for Firefox, and "border-top", "border-bottom" etc for IE).
Set the default value, for example:
$(this).css("height", "auto");
or in the case of other CSS features
$(this).css("height", "inherit");
If you don't want to use classes (which you really should), the only way to accomplish what you want is by saving the changing styles first:
var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");
// set style
// do your thing
$(this).css("font-size",oldFontSize);
// etc...
You could use the removeAttr method, if you want to delete all the inline style you added manually with javascript. It's better to use CSS classes but you never know.
$("#displayPanel div").removeAttr("style")
Actually the best way I have found to do this when having to do complex jquery based styling, for Example, if you have a modal that you need to display but it needs to calculate page offsets to get the correct parameters those will need to go into the a jQuery("x").css({}) function.
So here is the setting of the styles, the output of variables that have computed based on various factors.
$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})
In order to clear those styles. rather than setting something like
$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})
The simple way would be
$(".modal").attr("style", "")
When jquery manipulates elements on the dom, the styles are written to the element in the "style" attribute as if you were writing the styles inline. All you have to do is to clear that attribute and the item should reset to its original styles
Hope this helps
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(";"));
});
}
});
Source: Stackoverflow.com