웹 사이트에서 dyanamic css를 사용하는 방법

내 웹 사이트에서 동적 CSS를 사용하고 싶습니다. 웹 사이트 상단에 4 가지 색상 아이콘이 있으며, 사용자가 아이콘 전체 색 구성표 및 아이콘 색 중 하나를 클릭하면 웹 사이트가 변경됩니다.웹 사이트에서 dyanamic css를 사용하는 방법

이전에 yahoo.com에서 사용할 수 있습니다 (현재 사용 가능한지 여부는 알 수 없음).

또한 타사 CSS 라이브러리를 사용하고 싶지 않습니다. 또는 도구.

이 문제를 해결하는 가장 좋은 방법을 제안 할 수 있습니까?

출처

2013-12-13 Abhijeet Dange

아이콘 중 하나를 클릭하면 몸에 클래스를 추가하라는 스크립트가있을 수 있습니다. '.theme-green'을 선택하고 적절하게 스타일을 지정하십시오. jQuery'addClass'에 대해 조사한 후 고민 중이라면 몇 가지 코드를 게시하십시오. – davidpauljunior

실례의 링크가 있습니까? –

CSS에서 스타일을 정의하십시오. 예를 들어 ...

body.white{ 
    background-color:white; 
    color:#333; 
} 
body.black{ 
    background-color:black; 
    color: white; 
} 
body.blue{ 
    background-color:blue; 
    color:white; 
}

그런 다음 페이지에 피부/테마를 변경하고 스킨을 변경하는 클릭 핸들러를 추가 할 이미지 버튼을 추가합니다. here's an example

출처

2013-12-13 06:44:49 Leo

functon loadstyle(style){ 
    $('link#basestyle').attr('href', '/css/'+style+'.css'); 
}

예를 들어, HTML 코드 : 머리 : 몸에

<link type=text/css' rel='stylesheet' id='basestyle' href=/css/style1.css'>

는 :

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style1')"> 

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')"> 

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">

출처

2013-12-13 07:46:50

비슷한 질문 => http://stackoverflow.com/questions/3913359/how-to-load-css-using-jquery –

좋아, 그럼 처음에, 몸에서 기본 클래스를 추가 할 수 있습니다. 같은 :이 테마 클래스 내에 중첩하여 CSS를 유지

<i class="theme-icons" data-class="default"></i> 
<i class="theme-icons" data-class="red"></i> 
<i class="theme-icons" data-class="blue"></i> 
<i class="theme-icons" data-class="green"></i> 

$(".theme-icons").click(function(){ 
    $("body").removeClass("default red blue green").addClass($(this).attr("data-class")); 
});

<body class="default">

와는 아이콘의 클릭에, 단지 같은 신체의 클래스를 변경합니다. 좋아요 :

.default .something{ 
    color:#0F0; 
} 

.red .something{ 
    color:red; 
} 

.blue .something{ 
    color:blue; 
} 

.green .something{ 
    color:green; 
}

행운을 빕니다!

출처

2013-12-13 10:13:11

웹 사이트에서 dyanamic css를 사용하는 방법

답변

관련 문제