jQuery가 텍스트 섀도우 가변성

Question

CSS3 텍스트 섀도우 권한이있는 스팬을 클릭하면 4 개의 변수를 가져오고 싶습니다. text-shadow: -4px 11px 8px rgb(30, 43, 2);의 CSS의 타당성에 대한 그래서, 내 코드가 있어야한다 : 나는 어떻게 든이 데이터를 얻을 수있는 첫 번째 변수를 분할해야

var y = "-4px"; 
var x = "11px"; 
var blur = "8px"; 
color = "rgb(30, 43, 2)"; 

:

$("#element").click(function() { 
var text-shadow = $("#element").css("text-shadow") 
}); 

는처럼 분할 얻을 수있을 것이다.

고맙습니다

Answer 1

당신 를 찾고 있습니다.

var result = $('#element').css('text-shadow').match(/(-?\d+px)|(rgb\(.+\))/g) 
// result => ['rgb(30, 43, 2)', '-4px', '11px', '8px'] 
var color = result[0], 
    y = result[1], 
    x = result[2], 
    blur = result[3]; 

이

은 픽셀의 RGB 값을 숫자로 text-shadow 문자열 값을 분할 배열을 반환한다. 그것은이 특별한 경우에 당신을 도울 수 있지만, 당신은 아마 text-shadow

주의 가능한 모든 경우에 작동하게하는 데 좀 더 작업을해야합니다 :rgb(...) 값은 배열의 첫 번째 일치 왜냐하면 파이어 폭스, 크롬, 사파리, 오페라가 그것을 어떻게 할당하는지 독립적으로 반환하는 방식이기 때문입니다. IE는 다르게 할 수 있습니다.

Answer 2

확실한 방법은 다음과 같습니다 I 개별적으로 CSS에서 각 값을 추출 할 수있는 방법이 있다고 생각하지 않기 때문에

var properties = $('#element').css('text-shadow').split(" "); 

var y = properties[0]; 
var x = properties[1]; 
var blur = properties[3]; 
var color = properties[4] + " " + properties[5] + " " + properties[6]; 

Answer 3

는 가장 쉬운 방법은하는 것입니다 할 약간의 문자열 조작을하십시오. 반환 된 값이 순서에 그리고 이후 : 색상, Y, X, 흐림,이 스크립트로 끝날 것 : 당신은 변수로의 jQuery CSS의 결과를 분할하는 정규 표현식을 사용한다

var p = $('#element').css('text-shadow').split(' '); 
var color = p[0]+p[1]+p[2]; 
var y = p[3]; 
var x = p[4]; 
var blur = p[5];