2010-03-28 4 views
0

많은 요소의 색상을 쉽게 사용자 정의 할 수있는 PHP를 사용하여 CSS 파일을 작성합니다. 스타일 시트를 "다시 작성"하고 Jquery를 사용하여 DOM의 페이지에 적용 할 수 있습니까?Jquery와 CSS 전환이 가능합니까?

예 :

<?php 
if (isset($_POST['mycolor'])){ 
$myColor = $_POST['mycolor']; 
} else { 
$myColor = "blue"; 
} 
?> 

<style type='text/css'> 
    .style1{ 
    color:<?php $myColor;?>; 
    } 
</style> 

이제 내 페이지에 당신이 "빨간색으로 색상을 변경합니다"라고 클릭 할 수있는 링크가 때 당신이 "빨간색"클릭하여이 CSS를 포함 .style1를 재 구축 내 PHP 스크립트, 달러 (A $)의 .post을한다 - 페이지에서 스타일 시트를 변경할 수 있습니다.

테스트하지는 않았지만 작동 여부는 알 수 있습니까? DOM에 게시 한 후 새 스타일 시트를 echo'ed하면 페이지에도 적용됩니까?

+0

그것은 작동합니다 나타납니다 ... muwhahaha – Joe

+0

에서 무엇보다도 - – ahmet2106

답변

1

당신은 이런 일을 할 수는 PHP가 생성 :

function newCSS(params){ 
    $("link[href*=myStyles.php]:last").after('<link href="myStyles.php?'+ params +'" type="text/css" rel="Stylesheet" />'); 
    $("link[href*=myStyles.php]:first").remove(); 
} 

머리 부분의 링크를 새 것으로 바꿉니다. 새 스타일은로드되면 적용됩니다.

+0

내가 가지고있는 문제는 전환하는 동안 오래된 CSS가 페이지에 더 이상 존재하지 않는다는 것입니다. 로드 될 때까지 새로운 CSS를 표시하지 않을 곳이 있습니까? – Joe

+0

@Joe - '$ ("link [href * = myStyles.php]")와 같은 remove();' > 2) {$ ("link [href * = myStyles.php] : first"). remove(); }'이것은 하나의 재정의 된 스타일 시트를 남겨 두었으므로 결코 버려지지 않습니다. –

0

당신은 요소에 다른 CSS 속성을 설정 css 기능을 사용할 수 있습니다

$('.style1').css('color', 'red'); 
+0

분명히 현재의 "색상"값을 기반으로 요소를 선택하고 업데이트 할 수 없기 때문에이 작업을 수행하고 있습니다. 따라서 전체 CSS를 다시 작성하여 페이지에 다시 적용합니다. 그것은 CSS 스위처와 같은 개념으로, 사전 설정된 CSS 파일이 필요없는 모든 색상을 편집 할 수 있습니다. – Joe

0

나는 당신이 PHP 파일로 동적 CSS를 작성하는 것이 좋습니다. 여기에 더 많은 정보 : http://www.barelyfitz.com/projects/csscolor/

편집 : 여기 닉에서 제공하는 선택기를 사용하여 향상된 솔루션입니다 : 전체 스타일 시트 경우

$("link[href*=myStyles.php]").attr('href','myStyles.php'); 
0

LESS에 대해 들어 본 적이 있다면 잘 모르겠습니다. CSS에서 "변수"를 가질 수있게 해주는 멋진 작은 도구입니다. 당신이 정말로 원하는 것 같아요.

당신을 도울 This blog post을보십시오.