2013-08-21 4 views
1

IMG 요소가 있습니다. c. 다음 작품 (크롬)의 커서 변경 :자바 스크립트에서 여러 커서 값 설정

c.style.cursor='-webkit-zoom-out'; 

을하지만 다음과 같이 다른 브라우저에 대한 호환성을 추가하려고하면, 그것은 나누기 :

c.style.cursor='-webkit-zoom-out, -moz-zoom-out'; 

(그리고 나는 천국을 ' IE 호환성을 위해 .cur를 연결하려고 시도해도 ....) 스타일 요소에 여러 값을 추가하는 올바른 구문은 무엇입니까?

+0

자바 스크립트로이 작업을 수행해야합니까? 이것은 CSS3 스타일이므로 최신 브라우저를 목표로 삼고 있습니다. 귀하의 유스 케이스를 모르지만 CSS로 적용하여 원하는 효과를 얻을 수 있습니다. –

+0

CSS를 통해 커서를 설정하고 클래스 또는 속성을 전환하고 CSS가 스타일을 처리하도록해야합니다. – zzzzBov

답변

3

당신은 별도로 추가해야합니다 :

c.style.cursor = '-webkit-zoom-out'; 
c.style.cursor = '-moz-zoom-out'; 

불행하게도 zoom-inzoom-out 아직 Internet Explorer에서 지원되지 않습니다. MDN Cursor: Browser compatibility을 참조하십시오.

Try before buy

가 또는 올바른 스타일을 설정하는 CSS 클래스를 생성하고 추가하거나 당신이 그것을 전환해야하는 경우 자바 스크립트를 사용하여이 클래스를 제거 할 수 있습니다 데모.

+0

이상한 - 그래서'='javascript는 실제로'+ ='입니까? 어떻게하면이 특성을 가진 속성을 지울 수 있습니까? (.cursor = '';는 이전 값을 제거하지 않으므로) 어떻게 알 수 있습니까? – feetwet

+2

사실 그것은 그것을 연결하지 않습니다. CSS 규칙과 동일한 방식으로 작동합니다. 브라우저는 처리 할 수있는 값을 선택하고 다른 값은 버립니다. 데모에서 요소를 검사하면 '-webkit' 또는 -moz 만 인라인 스타일로 적용된다는 것을 알 수 있습니다. CSS 규칙과 동일하다 :'img {cursor : -webkit-zoom-out; 커서 : -moz-zoom-out; }'대신'img {커서 : -webkit-zoom-out, -moz-zoom-out; }'. 이 다른 [데모] (http://jsfiddle.net/cV3VN/)를 참조하십시오. – insertusernamehere

+0

감사합니다! 다음은 작업 예제 (XSLT이지만 아이디어는 동일합니다.)의 일부입니다.

관련 문제