如何使用JQuery从样式表中删除CSS属性？

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

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

2. Your CSS uses the "!important" modifier. You will not be able to overload that style with jQuery.

3. 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/