How to remove CSS attribute from a stylesheet using JQuery?

Question

I am trying to figure out how to remove css attributes using Jquery. The issue is that it seems like this can only be done if a style is inline. For instance, when I use this approach:

('.hero').css('background-image', '').css('background-color', '');

It does nothing, although if it has those attributes set using the STYLE property, than it works great. The same can be said for:

('.hero').css('background-image', 'none').css('background-color', 'transparent');

Can anyone assist me in removing attributes that are added via stylesheet and not inline?

You should be able to do the same. Just overwrite the current value. fiddle — Justin Wood
– Justin Wood, Commented Dec 22, 2013 at 1:02

loushou · Accepted Answer · 2013-12-22 01:14:16Z

3

You can do this, but it is very convoluted. The only way to accomplish this is to load the stylesheet into a string in javascript, grep out the rules you want to remove (using String.replace() or similar), then remove the current css tag from the page (using $.remove()), and then adding a new css tag with the grepped contents of the file/text you loaded.

This is very very convoluted. I think you need to rethink why you are trying to do this to begin with. Or maybe just stick with setting the values back to their defaults using jQuery, which can be found on w3schools. Or maybe create a style in the stylesheet that sets the values to their defaults, and give the element that style. OR just give us a little more info, and we may be able to suggest a better way around your problem.

answered Dec 22, 2013 at 1:14

loushou

1,5129 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S McCrohan · Accepted Answer · 2013-12-22 01:42:00Z

3

I think you may be asking the wrong question.

It looks like you want to be able to restyle an element without removing its existing class. A far easier way to do this is to ADD an additional class to the item you want differently styled, and then handle it in the CSS definition.

For instance:

('.hero').addClass("blank");

with CSS:

.hero.blank { background-color: transparent; }

As .hero.blank is more specific than .hero, it'll be the style applied first.

answered Dec 22, 2013 at 1:42

S McCrohan

6,7011 gold badge33 silver badges39 bronze badges

2 Comments

akhikhl Over a year ago

That will work. Small addition: it might be needed to use !important attribute in a newly defined class, if it is applied simultaneously with an old class.

TGammage Over a year ago

as well, you may want to removeClass() to the original class to avoid any strange conflicts between the classes

Qantas 94 Heavy · Accepted Answer · 2014-08-16 14:37:28Z

1

You have to set a default style for elements. Few default CSS properties from W3C. Most of default properties are listed here.

edited Aug 16, 2014 at 14:37

Qantas 94 Heavy

16k31 gold badges74 silver badges89 bronze badges

answered Dec 22, 2013 at 1:08

Ginden

5,31537 silver badges73 bronze badges

Comments

TGammage · Accepted Answer · 2013-12-22 01:47:46Z

0

it looks like to me you're trying to adjust several css attributes in the same function.

if you want to clear the background image and make the background transparent then you just need to change both in the same .css function

try

$('.hero').css("background-image:none; background-color:transparent");

or just set up a 2nd css class that has the style preformatted "heroAlt" and use jQuery to remove old class/add new class

$('.hero').removeClass(function(){
    $(this).addClass("heroAlt");
});

hope that helps

answered Dec 22, 2013 at 1:47

TGammage

1348 bronze badges

Comments

Nostalg.io · Accepted Answer · 2013-12-22 01:55:16Z

0

First of all, the following will work if used correctly:

$('.hero').css('background-image', 'none').css('background-color', 'transparent');

See: http://jsfiddle.net/Az7VZ/

That being said, there are a few pitfalls to watch out for.

You run your JavaScript before the HTML document containing the .hero div loads. This has the effect of jQuery selecting nothing to apply the CSS to.
Your CSS uses the "!important" modifier. You will not be able to overload that style with jQuery.
Also, don't forget the "$" or "jQuery" in your script.

Note: this DOES NOT override the actual .hero class. Therefore, if you add another element with the "hero" class, then it will have the original CSS styling. You would need to run the jQuery script again to apply the new style to the new element.

A great alternative to this, is creating different classes with the desired styles. Then removing/adding the CSS class via jQuery:

$('.hero').removeClass('hero').addClass('hero2');

See: http://jsfiddle.net/Az7VZ/1/

answered Dec 22, 2013 at 1:55

Nostalg.io

3,7921 gold badge31 silver badges31 bronze badges

2 Comments

S McCrohan Over a year ago

I basically agree with you, but as a matter of style I'd prefer adding a second, modifying class without removing the first. Now, that's because in my head, the first class is probably representing a type of thing (e.g 'menuItem') and the second a state (like 'selected'), which may or may not be true in this case.

Nostalg.io Over a year ago

@S McCrohan - Very true. I took too long to type, and didn't see your answer. :)

Collectives™ on Stack Overflow

How to remove CSS attribute from a stylesheet using JQuery?

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related