javascript - How to remove CSS attribute from a stylesheet using JQuery? - Stack Overflow

admin管理员组

文章数量:1318335

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?

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?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Dec 22, 2013 at 1:00 user1632018user1632018 2,5551212 gold badges5656 silver badges9191 bronze badges 2

• You should be able to do the same. Just overwrite the current value. fiddle – Justin Wood Commented Dec 22, 2013 at 1:02
• 3 You can't, you can just override them inline with jQuery. – Deryck Commented Dec 22, 2013 at 1:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can do this, but it is very convoluted. The only way to acplish 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.

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.

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

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

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

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

See: http://jsfiddle/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/Az7VZ/1/

本文标签： javascriptHow to remove CSS attribute from a stylesheet using JQueryStack Overflow