2011-08-17 3 views
2

다음 상황을 고려하십시오.jquery 배경 변경

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

다음 JQuery와 책임을 다음과 같이 마크 업이되는

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

2.Background 패턴 1.Photoshop 구배 내가 좋아하는 CSS 마크 업을 사용하는 : 나는 배경의 2 개 종류를했습니다 배경 변경 :

$(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; 
      }); 
     }); 

패턴 유형 배경을 선택한 다음 그라디언트/색상 유형 배경을 선택하면 배경색을 초기화 할 수 없습니다.

답변

1

은 어쩌면 당신은 배경 속성을 지워야에, 배경 이미지 및 배경 색 body에하고해야한다고 생각 한번에 모두?

2

JS에서 CSS 값을 저글링하는 대신 html에서 클래스를 사용하고이를 토글해야합니다.

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

여기에이 개념을 사용하는 [jsfiddle] (http://jsfiddle.net/2ccxq/)이 있습니다. – MikeM

1

나는 배경 스타일이되지는 모두 배경을 떠날 수 있기 때문에 html