1

the html:

<div class="tpc_content">
    ....
</div>

Here's the style snippet:

<style>
.tpc_content{ background: url('/aliwayWaterMaker.php') repeat !important; }
</style>

When I invoked $('.tpc_content').css('background'); at console from developer tools in Chrome, the output is:

"rgba(0, 0, 0, 0) url(http://www.aliway.com/aliwayWaterMaker.php) repeat scroll 0% 0% / auto padding-box border-box"

Then I tried to set this css property via command: $('.tpc_content').css('background', "rgba(20, 30, 40, 0)");, after which I sent $('.tpc_content').css('background'); again, and the output was still:

"rgba(0, 0, 0, 0) url(http://www.aliway.com/aliwayWaterMaker.php) repeat scroll 0% 0% / auto padding-box border-box"

Could anyone tell me how to remove the background image via jquery or javascript after the page loading?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Judking
  • 6,111
  • 11
  • 55
  • 84

4 Answers4

3

Its because you have !important in your css....

over ride with $('.tpc_content').attr('style', 'backround="url(http://www.aliway.com/aliwayWaterMaker.php) repeat scroll 0% 0% / auto padding-box border-box !important"');

But its better to just not use !important in your css

Nico
  • 12,493
  • 5
  • 42
  • 62
Seth McClaine
  • 9,142
  • 6
  • 38
  • 64
  • Could you give me an explanation about why `!important` restrains my change to the property? – Judking Jan 15 '14 at 03:24
  • 2
    http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – Bill Jan 15 '14 at 03:25
  • because your css is always there, even if you modify the dom. the !important will over ride anything you change in the dom unless you put !important in the dom – Seth McClaine Jan 15 '14 at 03:27
  • I didn't make it work bro.. I tried this one: `$('.tpc_content').attr('style', 'backround="rgba(0, 0, 0, 0) !important"');`, and the background didn't remove. – Judking Jan 15 '14 at 03:27
  • @Judking why are you using `!important` to begin with? Why don't you just move the class to the very bottom of your CSS or after any CSS stylizing? – Rayan Bouajram Jan 15 '14 at 03:29
  • This is not my page, bro. I have to do something to remove this background image after the page load complete. @RayanBouajram – Judking Jan 15 '14 at 03:31
  • you have to include all of the original styles with this method (so background = "url(....) – Seth McClaine Jan 15 '14 at 03:35
2

You can use cssText to override the !important with another one:

$('.tpc_content').css('cssText', 'background: rgba(20, 30, 40, 0.5) !important');

http://jsfiddle.net/88L66/

Source: http://bugs.jquery.com/ticket/2066

Ming
  • 4,468
  • 1
  • 21
  • 21
  • This one works for me, Thanks! By the way, Could you explain why doesn't @Seth McClaine's answer works? – Judking Jan 15 '14 at 03:34
  • I believe it's because the syntax is wrong. It should be: `$('.tpc_content').attr('style', 'background: rgba(20, 30, 40, 0) !important;');` – Ming Jan 15 '14 at 03:53
0

Judking- "Could you give me an explanation about why !important restrains my change to the property?"

css falls in the following order

class can be over written by id

call < id

id can be over written by inline style

id < inline

unless you use !important then what ever has !important takes precedence... the only way to overwrite that is to add !important to a superseding identifier

What you have is a class that has !important and are trying to over ride 

.class + !important > inline

the only way to over ride this is to make your inline !important

.class + !important < inline + !important
Seth McClaine
  • 9,142
  • 6
  • 38
  • 64
  • Clear enough, thanks! but I'm confused why didn't your `$('.tpc_content').attr('style', 'backround="rgba(0, 0, 0, 0) !important"');` work for me. – Judking Jan 15 '14 at 03:37
  • because you have to re-define everything this is printed when you do $('.tpc_content').attr('style'); it doesnt just add it clears out everything – Seth McClaine Jan 15 '14 at 03:43
0

Here's a way to do it with raw DOM elements, though if you're using jQuery you probably get those from jQuery.get():

Overriding !important with css or jquery

!important restricts what you can do with a .css() call since anything marked as !important by the author has a higher specificity than the styles you're applying using elem.css().

Community
  • 1
  • 1
Willy
  • 1,055
  • 8
  • 23