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

Answer 1

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

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

Answer 2

The accepted answer works but leaves an empty style attribute on the DOM in my tests. No big deal, but this removes it all:

removeAttr( 'style' );

This assumes you want to remove all dynamic styling and return back to the stylesheet styling.

Answer 3

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")

Answer 4

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');

Answer 5

This will remove complete tag :

  $("body").removeAttr("style");

Answer 6

either of these jQuery functions should work:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

Answer 7

Just using:

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

or

$('#tag-id').removeAttr('style');

Answer 8

How about something like:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

Answer 9

If you use CSS style, you can use:

$("#element").css("background-color","none"); 

and then replace with:

$("#element").css("background-color", color);

If you don't use CSS style and you have attribute in HTML element, you can use:

$("#element").attr("style.background-color",color);

Answer 10

Use my Plugin :

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

For your case ,Use it as following :

$(<mySelector>).removeCss();

or

$(<mySelector>).removeCss(false);

if you want to remove also CSS defined in its classes :

$(<mySelector>).removeCss(true);

Answer 11

Try this:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Thanks

Answer 12

2018

there is native API for that

element.style.removeProperty(propery)

Answer 13

This one also work!!

$elem.attr('style','');

Answer 14

Why not make the style you wish to remove a CSS class? Now you can use: .removeClass(). This also opens up the possibility of using: .toggleClass()

(remove the class if it's present, and add it if it's not.)

Adding / removing a class is also less confusing to change / troubleshoot when dealing with layout issues (as opposed to trying to figure out why a particular style disappeared.)

Answer 15

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

Answer 16

This is more complex than some other solutions, but may offer more flexibility in scenarios:

1) Make a class definition to isolate (encapsulate) the styling you want to apply/remove selectively. It can be empty (and for this case, probably should be):

.myColor {}

2) use this code, based on http://jsfiddle.net/kdp5V/167/ from this answer by gilly3:

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Usage example: http://jsfiddle.net/qvkwhtow/

Caveats:

• Not extensively tested.
• Can't include !important or other directives in the new value. Any such existing directives will be lost through this manipulation.
• Only changes first found occurrence of a styleSelector. Doesn't add or remove entire styles, but this could be done with something more elaborate.
• Any invalid/unusable values will be ignored or throw error.
• In Chrome (at least), non-local (as in cross-site) CSS rules are not exposed through document.styleSheets object, so this won't work on them. One would have to add a local overrides and manipulate that, keeping in mind the "first found" behavior of this code.
• document.styleSheets is not particularly friendly to manipulation in general, don't expect this to work for aggressive use.

Isolating the styling this way is what CSS is all about, even if manipulating it isn't. Manipulating CSS rules is NOT what jQuery is all about, jQuery manipulates DOM elements, and uses CSS selectors to do it.

Answer 17

Simple is cheap in web development. I recommend using empty string when removing a particular style

$(element).style.attr = '  ';

Answer 18

Try This

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');

Answer 19

you remove style using

removeAttr( 'style' );

Answer 20

You can use:

 $("#eslimi").removeAttr("style").hide();

Answer 21

Try

document.body.style=''

$("body").css("background-color", 'red');

function clean() {
  document.body.style=''
}

body { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clean()">Remove style</button>