Remove background color/images for all elements with jQuery

Question

Is there a simple way to use jQuery to remove all background styles on a page? Specifically, need to remove background color and images.

alex · Accepted Answer · 2013-07-16T00:36:33.113

31

Real simple with jQuery...

$('*').css('background', 'transparent');

jsFiddle.

If you didn't have jQuery at your disposal...

var allElements = document.getElementsByTagName("*");

for (var i = 0, length = allElements.length; i < length; i++) {
    allElements[i].style.background = "none";
}

jsFiddle.

edited Jul 16 '13 at 00:36

answered Dec 08 '10 at 04:37

alex

479,566
201
878
984

Here is why! Introducing the Yule Log-on Greasemonkey script: http://userscripts.org/scripts/show/92217. Happy holidays! – Ian McIntyre Silber Dec 08 '10 at 05:11

score 1 · Answer 2 · edited Mar 27 '13 at 20:49

1

$('*').css('background', 'transparent');

edited Mar 27 '13 at 20:49

alex

479,566
201
878
984

answered Jan 02 '13 at 08:51

Sharon

11
1

What are the advantages of using `'transparent'` over `'none'`? – alex Mar 27 '13 at 20:50
@alex -- Apparently `transparent` is the valid property assignment here, where `none` is not valid CSS2... see http://stackoverflow.com/questions/8739665/is-background-colornone-valid-css – Ian Campbell Jul 15 '13 at 19:48
@IanCampbell Interesting. `transparent` it is :) – alex Jul 16 '13 at 00:35

score -1 · Answer 3 · edited Jul 09 '12 at 20:08

HTML

<ul>
 <li class="one"><a href="#"></a></li>
        <li class="two"><a href="#"></a></li>
        <li class="three"><a href="#"></a></li>
</ul>

CSS

.bg1 { background: url(images/red.jpg) repeat-x; background-color: #6c0000; }
.bg2 { background: url(images/orange.jpg) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(images/blue.jpg) repeat-x; background-color: #00345B; }

JS

$(document).ready(function(){ 

        $("li.one").click( function(){ $
  ("body").removeClass('bg2 , bg3').addClass("bg1");
 });

 $("li.two").click( function(){ $
  ("body").removeClass("bg1 , bg3").addClass("bg2");
 });

 $("li.three").click( function(){ $
  ("body").removeClass("bg1 , bg2").addClass("bg3");
 }); 

});

pooja , you can format the code by using 100101 above or ctnr-k — kobe, Dec 08 '10 at 05:32

Remove background color/images for all elements with jQuery

3 Answers3

Linked