jQuery에서 월/계절에 따라 스타일 시트 변경하기

Question

jquery로 어떤 계절에 따라 스타일 시트를 바꿀 수있는 방법을 찾으려고합니다.이 시점에서이 사이트에서 PHP 나 루비를 사용할 수 있는지 알 수 없기 때문에 알 수 없습니다. . 귀하의 답변에 감사드립니다!

Answer 1

CSS 파일이 이미로드되어 있고 정적 CSS가로드 된 후 jQuery가 CSS를 적용하기 때문에 페이지에서 변경하려는 항목의 범위를 좁히는 것이 좋습니다. 이 특정 스타일 선언을 CSS에서 제외하거나 기본값으로 유지할 수 있습니다. 예를 들어, 배경 이미지가 변경되면 기본 CSS 선언에서 흰색으로 설정할 수 있습니다. 이 방법은로드시 정상적으로 보이며 필요한 항목을로드하는 데 자바 스크립트 만 사용하고 있습니다.

당신은 당신이 jQuery를 준비 기능을 머리에 그 스타일을 적용하기 위해 jQuery를 사용할 수,

var month = new Date(); 
month = month.getMonth(); 

그리고 현재 월을 얻기 위해 자바 스크립트 달 기능을 사용할 수 있습니다. 달 번호에 따라 네 개의 명령문 중 하나를 선택하기 위해 if/else 문을 간단하게 전환 할 수 있습니다. 예를 들어, 배경을 변경하려는 경우

$("head").append("<style type=\"text/css\">body {background-color: #FFF !important;}</style>"); 

간단한 예제가 있지만 전체 시트를로드하는 것보다 더 효율적으로 만들 수 있습니다.

Answer 2

페이지가 준비되면 .summer 아래의 모든 클래스는 서버/클라이언트에서 다음 여름
의 기본 스타일보다 우선합니다

.someStyle{ color:blue;}  
.summer .someStyle{color:yellow;} 
.winter .someStyle{color:purple;} 
... 

의 형태에 하나의 CSS에서 모든 선언을 넣어 -이 추가 클래스 몸에

클라이언트에서 수행하는 유일한 문제는 기본 스타일을 먼저 렌더링 한 다음 새 것으로 전환한다는 것입니다. (사이트 사용자에게 가장 일반적인 시즌을 선택하십시오. 여름을 선택하십시오 ;-)

Answer 3

가장 간단한 방법은 CSS 스타일을 범위 지정하고 상위 수준에 클래스를 추가하는 것입니다. 보통 본문 요소에서이 작업을 수행합니다.

다음

body.summer ul { background-color: green; } 
body.fall ul { background-color: orange; } 
body.winter ul { background-color: white; } 
body.spring ul { background-color: pink; } 

이 몸 클래스 설정 JS를 사용 :

...</body> 
<script ...> 
var season = (new Date()).getMonth...; 
$('body').addClass(season); 
</script> 
</html> 

당신이 볼 수 있듯이을, 나는 즉시 몸 태그를 닫은 후이 배치 것처럼 CSS 보인다. 나는 이것이 당신이 그것을 넣을 수 있고 그것을 작동시킬 수있는 첫 번째 장소라고 생각하지만, 당신은 확인해야 할 것입니다. 여기에 넣을 이유는 스타일이없는 콘텐츠의 플래시를 방지하는 것입니다. 페이지에서 계속 진행되는 경우 준비된 콜백 전에이 자바 스크립트를 실행해야합니다. 즉, 실제로 준비 콜백에 대부분의 코드를 넣는 데별로 문제가 없었습니다.

아마도 같은 장소에서 다른 스타일 시트를 쉽게로드 할 수 있습니다. 스타일 노드를 만들어 마지막 노드로 삽입하십시오. 스타일간에 큰 차이가있을 경우이 작업을 수행 할 수 있습니다. 유지하기가 꽤 까다 롭습니다.

$("head").append("<style type=\"text/css\" src=\"" + season + ".css\"">");