2014-02-28 2 views
1

jQuery로 버튼 제네레이터를 만들고 여러 브라우저에 대한 스타일을 요소에 추가하려고합니다. 나는이 코드를 사용하여이 작업을 수행 :jQuery - 요소에 브라우저 간 CSS 스타일 추가

jQuery('.previewButton').css('background',''); 
    var s = jQuery('.bg_start_color').val(); 
    var e = jQuery('.bg_end_color').val(); 
    jQuery('.previewButton').css('background-color',s); 
    jQuery('.previewButton').css('background','-webkit-gradient(linear, 0% 0%, 0% 100%, from('+s+'), to('+e+'))'); 
    jQuery('.previewButton').css('background','-webkit-linear-gradient(top,'+s+', '+e+')'); 
    jQuery('.previewButton').css('background','-moz-linear-gradient(top,'+s+','+e+')'); 
    jQuery('.previewButton').css('background','-ms-linear-gradient(top,'+s+','+e+')'); 
    jQuery('.previewButton').css('background','-o-linear-gradient(top,'+s+','+e+')'); 

난에 직면 문제는 내가 사파리에서 사용할 때 -webkit- 스타일 요소 .previewButton에 적용되는 것입니다. Firefox에서 생성기를 사용할 때 -moz- 스타일이 버튼에 적용됩니다. 데이터베이스에 버튼을 저장하고 지금 당장 작업하고있는 브라우저뿐만 아니라 모든 크로스 브라우저 관련 스타일을 저장하고 싶습니다.

하지만 코드에 모두 적용해야한다고 말하면 브라우저 관련 스타일 만 요소에 적용되는 이유는 무엇입니까? 어떻게 바꿀 수 있습니까? 누군가는 알고 있는가?

감사합니다.

+0

브라우저 고유의 스타일 만 적용되므로 모든 브라우저 자체가 해당됩니다. 웹 브라우저는 그들이 아는 것을 해석하고 그렇지 않은 것은 무시합니다. 그래도 "버튼을 데이터베이스에 저장하는 것"이 ​​무슨 뜻인지 잘 모르겠지만 더 자세히 설명해 주시겠습니까? –

+0

예, 물론입니다. 사용자가 적용한 스타일을 포함하여 previewButton을 데이터베이스에 추가하려고합니다. 확실히 사용자는 사용자가 작업하고있는 브라우저뿐만 아니라 모든 브라우저에서 해석 할 수있는 버튼의 스타일을 저장해야합니다. – Torben

+0

어떤 데이터베이스입니까? 어떻게이 데이터베이스에 저장하고 있습니까? 브라우저의 스타일을 해석하는 대신 스타일을 데이터베이스에 직접 저장해야하는 것처럼 들립니다. –

답변

0

보관할의 색상 값을 추적 한 다음, 데이터베이스에 스타일을 작성하는 CSS에 의해 Broswer 특정 스타일을 모두 포함 할 때 - 그냥 스타일은 현재 버튼에 적용뿐만 아니라 CSS 스타일을 적용합니다

0

브라우저 그들은 그것을 이해합니다. 예를 들어 Safari는 -moz- 또는 -ms- 접두어가 붙은 스타일을 인식하지 않으므로 무시됩니다. 그것이 웹 검사관에 나타나지 않는 이유입니다. 그렇다고 크로스 브라우저 스타일이 없다는 것을 의미하지는 않습니다. 현재 브라우저가 브라우저를 이해하지 못하기 때문에 현재 브라우저가 브라우저를보고 있지 않다는 것을 의미합니다.

모든 것이 올바르게 작동하므로 걱정하지 마십시오.

관련 문제