remove background-image from style

Question

How can i remove background-image from element style. I don't want to set it to none or 0. I want to remove it completely. it's conflicting with moz-linear-gradient which is defined in another class.

<div style="background-image:url(http://domain.com/1.jpg); width:100px" class="mozgradient"></div>

Solution 1

Have you tried:

$(".mozgradient").css("background", "");

Setting the background to an empty string should remove the inline style such that class and other stylesheet settings take effect, but it shouldn't affect other styles that were set inline like width. (In this case removing it from all elements with the mozgradient class prevents the conflict you are talking about.)

From the jQuery .css() doco:

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.

Solution 2

If you want to dynamically remove background image, then use $("selector").css(); function in jquery or inn CSS apply background:none See more at: http://jsfiddle.net/creativegala/um3Ez/

Solution 3

I'm not entirely sure what you are after, but I'm making an assumption that you have the inline style on the div tag, and via CSS, you're trying to over-ride that.

The only option here is the !important flag in your css file. So in your css file you'd have this:

.mozgradient {background-image(whatever) !important}

UPDATE:

I see now that you are trying to do it via jQuery. Try this:

var divWidth = $yourDiv.css('width');

$yourDiv.removeAttr('style').css('width', divWidth);

Though note that that would only work provided 'width' is the only css inline style you want to preserve. If there could be any inline style in there, you'd have to resort to either the CSS option above of using !important or using jQuery, grab the entire style attribute and get dirty with REGEX to parse out any background-image styles specifically.

UPDATE II:

OK, based on the comments, this is getting tricky. The challenge is that there may be any number of inline styles being applied via the style attribute (ugh! I feel your pain!) and we only want to clear out the background-image so that we can let the external CSS handle it.

Here's another option:

// create a div and attach the class to it
$testDiv = $('<div>').class('mozgradient').css('display','none');

// stick it in the DOM
$('body').append($testDiv);

// now cache any background image information
var bgndImg = $testDiv.css('background-image');

// get rid of the test div you want now that we have the info we need
$testDiv.destroy();

// now that we have the background-image information 
// from the external CSS file, we can re-apply it
// to any other element on the page with that class
// name to over-ride the inline style
$('.mozgradient').css('background-image',bgndImg);

Clunky, but I think it'd work.

Comments

[Pinkie]

I can't use this. I do not know how many styles i have. It's dynamically generated. I only need to look into background-image.

[Pinkie]

The jQuery part. Your creating a variable divwidth. I may have 20 different styles dynamically generated. I can't assign variables like this.

[DA.]

Right. Well, as I state, I think you're only option at that point is to resort to text parsing via REGEX. Grab the STYLE attribute as a string, look for the background-image part, remove it, then put it back. Alas, REGEX always gives me headaches so I won't be much specific help for you. I'd try and figure out if you can implement the !important flag on the external CSS file instead. Might be a saner solution.

[Pinkie]

The question is i want to remove background-image from style. I don't want it there. i can't set it to none because it will conflict with background-image from another class

[DA.]

@Pinkie I updated my answer with a 3rd option. See if that might work.

[DA.]

Alas, that won't work as the OP doesn't know which styles may exist inline (sounds like there could be any number of them)

[DA.]

nnnnnn - that's good info! This last part of the documentation seems to indicate it's exactly what @pinkie is looking for "It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element." (let us know if that works pinkie!)

[DA.]

I think this is the reverse of what the OP is looking for. They don't want the inline style so that the background-image defined in the .mozgradient class in the external css file is used instead.

[nnnnnn]

Note that this isn't just a jQuery thing: you should be able to achieve exactly the same thing with yourElement.style.background = "";

[Bob]

$(".mozgradient").css("background", ""); works not in all browsers :-/ i think better is $(".mozgradient").css("background", "none");

[nnnnnn]

@Bob - No, that won't do what Pinkie wants. .css("background","") will remove the inline background style from the element(s) in question while still allowing other background styles from the style sheet to take effect, but your suggestion of .css("background", "none") sets an inline style and thus overrides the stylesheet.