изменение фона jquery

Question

Рассмотрим следующую ситуацию. У меня есть 2 типа фона: 1. Градиенты Photoshop, для которых я использую разметку CSS, например:

html{
                background-image: url('imgs/gradient.png');
                background-repeat: repeat-x;
                background-color: #000000;
            }

2. Шаблоны фона, для которых разметка выглядит следующим образом

html{
    background-image:url('paper.gif');
}

За изменение фона отвечает следующий Jquery:

$(function() {
            $('a').click(function() {
                var currentLink = $(this);
                var which = $(this).attr('id');
                //Color scheme variables(image,color)
                var image = '';
                var color = '';
      //gradient + color background
                if (which == 'a1')
                    {image = "url(backgrounds/pat2.png)";
                    color = "#3a2c33";}
     //pattern type background
                       else if(which == 'a2')
                    {image = "url(backgrounds/pat4.jpg)";
                    color = " ";}
                if(color != " "){
                    $('html').css("background-image", image);
                    $('html').css("background-color", color);
                }
                else{
                    $('html').css("background", image);
                }
            return false;
            });
        });

Если я выберу фоновый узор типа, а затем градиент / цвет фона, цвет фона не может быть инициализирован.

Answer 1

Вместо того, чтобы жонглировать background значениями CSS в JS, вы должны использовать класс на html и переключать его.

html { background-image:url('paper.gif'); }
html.alt { background:#000 url('imgs/gradient.png') repeat-x; }

Answer 2

Может быть, вам нужно очистить атрибут background, так как он может оставить и background, background-image и background-color одновременно?

Answer 3

Я думаю, что стиль фона должен быть на body, а не на html