Advertisement
Advertisement


How can I remove a style added with .css() function?


Question

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

How can I do this?
Note that the line above runs whenever a color is selected using a color picker (ie. when the mouse moves over a color wheel).

2nd note: I can't do this with css("background-color", "none") because it will remove the default styling from the CSS files.
I just want to remove the background-color inline style added by jQuery.

2020/08/24
1
885
8/24/2020 8:57:26 PM

Accepted Answer

Changing the property to an empty string appears to do the job:

$.css("background-color", "");
2019/06/18
1349
6/18/2019 1:35:38 PM


There are several ways to remove a CSS property using jQuery:

1. Setting the CSS property to its default (initial) value

.css("background-color", "transparent")

See the initial value for the CSS property at MDN. Here the default value is transparent. You can also use inherit for several CSS properties to inherite the attribute from its parent. In CSS3/CSS4, you may also use initial, revert or unset but these keywords may have limited browser support.

2. Removing the CSS property

An empty string removes the CSS property, i.e.

.css("background-color","")

But beware, as specified in jQuery .css() documentation, this removes the property but it has compatibilty issues with IE8 for certain CSS shorthand properties, including background.

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or element.

3. Removing the whole style of the element

.removeAttr("style")
2016/01/23

I got the way to remove a style attribute with pure JavaScript just to let you know the way of pure JavaScript

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');
2016/11/28

This will remove complete tag :

  $("body").removeAttr("style");
2016/12/01

either of these jQuery functions should work:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
2013/08/28

Just using:

$('.tag-class').removeAttr('style');

or

$('#tag-id').removeAttr('style');
2016/12/01

Source: https://stackoverflow.com/questions/4036857
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]